html - 剪掉字母而不是单词

Question

我正在制作一种提要，名称最长可达 32 个字符，因此我设置了最大宽度，这样它就不会太长。问题是我的 css 如果它比最大宽度长，它会剪掉最后一个字，我怎样才能让它剪掉使它变长的字母？

(抱歉，如果您运行代码，这里看起来有点不同)

div.raffleentry {
	width: 100%;
	height: 61px;
	background-color: #6FFF6F;
	border-width: 1px 0px 0px 0px;
	border-color: #8B8B8B;
	border-style: solid;
	box-sizing: border-box;
}

p.raffleentry {
	width: 759px;
	height: 61px;
	font-size: 25;
	line-height: 61px;
	float: right;
	background-color: red;
}

span.profilename {
	font-weight: bold;
	height: 61px;
	line-height: 61px;
	max-width: 200px;
	overflow: hidden;
	text-align: right;
	display: inline-block;
	background-color: orange;
}

<div class="raffleentry">
  <p class="raffleentry"><span class="profilename">FaZe Crab OpTic</span></p>
  <img class="profilepic" src="faze crab optic.jpg">
</div>

你看到什么了。 幕后究竟发生了什么。 我想要发生的事情。

Answer 1

您需要将 white-space: nowrap; 添加到 span.profilename(来自 W3Schools - 空格序列将折叠成一个空格。文本永远不会换行到下一行。文本在同一行继续，直到遇到
标记)