如何修剪文字？

Question

这是我的截图：

这是我的以下代码：

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

我的问题，如果文本超出div，如何修剪我的文本？ 我希望我的文字像第二个盒子一样被修剪。 请告诉我怎么做。

Answer 1

使用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属性具有隐藏值，滚动或自动和white-space：nowrap时才起作用，如下面的链接所述

如果您想了解更多信息， 本网站将很好地讨论该主题

Answer 2

你必须将它添加到你的风格。

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

演示

Answer 3

设置样式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 4

使用text-overflow: ellipsis; 带有white-space: nowrap; overflow: hidden;属性white-space: nowrap; overflow: hidden; 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: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 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;
}

谢谢