如何修剪文字？

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; 
} 

感谢