css 实现文本换行及显示不下隐藏显示省略号

痛定思痛。 2021-11-11 01:40 407阅读 0赞

## [CSS文本超出2行就隐藏并且显示省略号][CSS_2] ##

转载：https://www.cnblogs.com/wyaocn/p/5830364.html

今天做东西，遇到了这个问题，百度后总结得到了这个结果。

首先，要知道css的三条属性。

overflow:hidden; //超出的文本隐藏

text-overflow:ellipsis; //溢出用省略号显示

white-space:nowrap; //溢出不换行

这三个是css的基础属性，需要记得。

但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？

css3解决了这个问题，解决方法如下：

display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

\-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

\-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。

最后的css样式如下：

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

\-webkit-box-orient:vertical;

\-webkit-line-clamp:2;

转载自：http://blog.csdn.net/bing0728004/article/details/51509435

\-----------------------------------一下代码还未验证真伪-------------------------------------------

如果是两行或者三行的容器，想要纯用css实现这个方法，是没办法做到的。

可以提供两种方法，一是用程序输出时截字，二是用js判断字数截取。

JS的demo如下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;!DOCTYPE&nbsp;html&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>html</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>head</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>meta</code>&nbsp; 
      <code>charset</code> 
      <code>=</code> 
      <code>"utf-8"</code> 
      <code>&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>title</code> 
      <code>&gt;Examples&lt;/</code> 
      <code>title</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>style</code>&nbsp; 
      <code>type</code> 
      <code>=</code> 
      <code>"text/css"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>.demo{width:100px;}</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>style</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>head</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>body</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code>&nbsp; 
      <code>class</code> 
      <code>=</code> 
      <code>"demo"</code>&nbsp; 
      <code>id</code> 
      <code>=</code> 
      <code>"demo"</code> 
      <code>&gt;怎么显示两行或三行文字，然后多出的部分省略号代替?&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>script</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>//&nbsp;js无法直接通过class获取对象，必须自己写一个方法,这样效率会非常低，原生js里最好用id获取，</code> 
     </div> 
     <div> 
      <code>//&nbsp;直接用id获取domo对象</code> 
     </div> 
     <div> 
      <code>var&nbsp;oBox=document.getElementById('demo');</code> 
     </div> 
     <div> 
      <code>//&nbsp;slice()&nbsp;方法可从已有的数组中返回选定的元素。</code> 
     </div> 
     <div> 
      <code>//&nbsp;您可使用负值从数组的尾部选取元素。</code> 
     </div> 
     <div> 
      <code>//&nbsp;如果&nbsp;end&nbsp;未被规定，那么&nbsp;slice()&nbsp;方法会选取从&nbsp;start&nbsp;到数组结尾的所有元素。</code> 
     </div> 
     <div> 
      <code>//&nbsp;此处需要根据需求自行修改slice()的值，以达到要显示的内容</code> 
     </div> 
     <div> 
      <code>var&nbsp;demoHtml&nbsp;=&nbsp;oBox.innerHTML.slice(0,10)+'...';</code> 
     </div> 
     <div> 
      <code>//&nbsp;填充至指定位置</code> 
     </div> 
     <div> 
      <code>oBox.innerHTML&nbsp;=&nbsp;demoHtml;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>script</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>body</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>html</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/dehuachenyunfei/p/11149583.html

[CSS_2]: https://www.cnblogs.com/wyaocn/p/5830364.html