如何让div最多显示2行并超出部分显示省略号？

嘿，这个需求我之前做项目时也常碰到！要搞定多行文本溢出后显示省略号，只加text-overflow: ellipsis可不够——它默认只支持单行截断。咱们得用CSS的多行截断属性组合来实现，我来帮你调整代码：

核心CSS属性说明 #

要实现2行文本截断，目标文本元素需要这几个关键属性配合：

• display: -webkit-box：把元素转为webkit内核的弹性盒模型
• -webkit-box-orient: vertical：设置弹性盒内元素垂直排列
• -webkit-line-clamp: 2：明确限制最多显示2行
• overflow: hidden：隐藏超出容器的内容
• text-overflow: ellipsis：在溢出位置显示省略号

修改后的完整代码示例 #

<div class="center-block" style="width: 250px;"> 
  <div style="height: 250px; /* 1:1 ratio */ overflow: hidden; background-color: #f8ff15;"> </div> 
  <div class="text-center" id="max2lines-div" style="background-color: lightyellow; width: 100%;"> 
    <p id="subject-text" style="
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0; /* 去掉p标签默认外边距，避免影响高度计算 */
    ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugiat!</p>
  </div>
</div>

小补充 #

• 这个方案基于webkit内核，Chrome、Safari和大部分移动端浏览器都完美支持；如果要兼容Firefox这类非webkit浏览器，可能需要用JavaScript计算文本高度来手动添加省略号，但日常开发里webkit方案已经能覆盖绝大多数场景了。
• 建议不要给父容器硬设max-height，让-webkit-line-clamp自动控制行数会更稳妥，避免因为字体大小变化导致布局错乱。

内容的提问来源于stack exchange，提问作者David Foie Gras