2015-09-26 55 views
1

我正在製作一種飼料,並且名稱最多可以有32個字符,所以我製作了一個最大寬度,因此它不會很長。事情就是用我的css,如果它的最大寬度超過了最大寬度,它會將最後一個單詞剪掉,我怎樣才能讓它只剪掉那些讓它變長的字母?剪下字母而不是單詞

(很抱歉,如果你運行的代碼看起來有點放在這裏不同)

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

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

 
span.profilename { 
 
\t font-weight: bold; 
 
\t height: 61px; 
 
\t line-height: 61px; 
 
\t max-width: 200px; 
 
\t overflow: hidden; 
 
\t text-align: right; 
 
\t display: inline-block; 
 
\t 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>

enter image description here你看到的是什麼。 enter image description here在幕後發生了什麼事情。 enter image description here我想要發生的事情。

回答

1

您需要添加white-space: nowrap;span.profilename(從W3Schools的 - 。空白的序列會崩潰到一個單一的空白文本永遠不會換到下一行的文本繼續在同一行,直到遇到一個
標籤)

相關問題