我正在制作一种Feed,名称最长可达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>
答案 0 :(得分:1)
您需要将white-space: nowrap;
添加到span.profilename
(来自W3Schools - 空格序列将折叠为单个空格。文本将永远不会换行到下一行。文本将继续在同一行上,直到遇到了标签)