带省略号的文本修剪 [英] Text trimming with elipsis

问题描述

我正在尝试使用CSS在div中为某些文本添加一个省略号.

例如


< div style ="???????">

WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW


</div>


我想要的是最终结果看起来像:WWWWWW ...

或至少在没有.....
的情况下切断
div位于td内部，当文本太长时，td会延伸，并且不能将td或div设置为固定宽度.

我该怎么办?

谢谢！

Hi, I am trying to add an elipsis for some text inside a div using css.

for example,


<div style="???????">

WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW


</div>


What I want is for the end result to look like: WWWWWW...

Or at least just cut off without the ....

The div is inside a td which stretches out when the text is too long, and making the td or div a fixed width is not an option.

How can I do this?

Thanks!

推荐答案

添加CSS类

Add CSS Class

.ellipsis span {
  white-space:nowrap;
   text-overflow:ellipsis; /* for internet explorer */
   overflow:hidden;
   width:190px;
   display:block;
}
html>body .ellipsis {
   clear:both;
}
html>body .ellipsis span:after {
   content: "...";
}
html>body .ellipsis span {
   max-width:180px;
   width:auto !important;
   float:left;
}

HTML是

And HTML is

<div class="ellipsis">
     <span>wwwwwwwwwwgfdgdfgdfgdfgfdgdfgdfgxgsdgsdfgdfgfdgdfgdfgdfgdfgdfg</span>
</div>

这篇关于带省略号的文本修剪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！