如何修剪文字？

Question

這裏是我的截圖：

，這是我下面的代碼：

<div style="background:green; width:100px; height:27px;"> 
This is text to be written here 
</div> 

我的問題，如何修剪我的文字，如果它超出的div？我希望我的文本像第二個框一樣被修剪。請告訴我該怎麼做。

Answer 1

你必須添加到你的風格。

text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

Demo

Answer 2

使用text-overflow: ellipsis;財產white-space: nowrap; overflow: hidden;。

所以，你的代碼看起來像這樣

<div style="background:green; width:100px; height:27px;text-overflow: ellipsis;white-space: nowrap; overflow: hidden;"> 
This is text to be written here 
</div> 

Here是怎麼回事的一個很好的解釋。

Answer 3

使用overflow和text-overflow CSS規則

div { 
 
    overflow: hidden 
 
    text-overflow: hidden 
 
}

<div style="background:green; width:100px; height:27px;"> 
 
This is text to be written here 
 
</div>

text-overflow只會工作，當容器的overflow屬性有隱藏的價值，滾動或自動和空白：NOWRAP中所描述下面的鏈接

This site談論這個話題，如果你想了解更多

Answer 4

設置下列樣式屬性：

• text-overflow:ellipsis
• white-space:nowrap
• overflow:hidden

<div style="background:green; width:100px; height:27px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;"> 
 
This is text to be written here 
 
</div>

Answer 5

設置樣式text-overflow, white-space, overflow屬性：

<div style="background: green;height: 27px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100px;"> 
 
This is text to be written here 
 
</div>

Answer 6

這個CSS添加到您的代碼：

div{ 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
}

<div style="background:green; width:100px; height:27px;"> 
 
This is text to be written here 
 
</div>

Answer 7

下面是使用CSS或jquery的

的jquery

<div id="text"> 
This is text to be written here 
</div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    var text =$('#text').html(); 
    if(text.length>20){ 
    $('#text').html(text.substr(0,20)+'...') ; 
    } 
}); 

修剪文本代碼級

的CSS

<div id="css"> 
This is text to be written here 
</div> 

#css { 
    text-overflow: ellipsis ; 
    background:green; 
    width:100px; 
    height:27px; 
    display:inline-block; 
    overflow: hidden; 
    white-space:nowrap; 
} 

感謝