我正在进行某种形式的提要,并且名称最多可以包含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>





html - 剪掉字母而不是单词-LMLPHP您所看到的。
html - 剪掉字母而不是单词-LMLPHP幕后的实际情况。
html - 剪掉字母而不是单词-LMLPHP我想发生的事情。

最佳答案

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

关于html - 剪掉字母而不是单词,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32798634/

10-11 08:25