巧用CSS实现固定大小Div中多行文本的省略号显示

如何在固定宽高div内限制多行文本显示，并在超出部分显示省略号？ 本文提供CSS解决方案。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

以下代码演示了如何在一个固定宽高的div中，限制文本显示为两行，并在第二行超出时显示省略号：

<code class="html"><div class="text">
  浮动元素的定位机制
  正如前面所述，浮动元素脱离文档流，并向左或向右移动，直到遇到容器边界或其他浮动元素。
</div></code>

<code class="css">.text {
  width: 200px;
  height: 38px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}</code>

这段CSS代码利用了-webkit-box、-webkit-line-clamp和-webkit-box-orient属性。-webkit-line-clamp限制文本显示行数为2；-webkit-box-orient: vertical确保文本垂直排列；overflow: hidden隐藏超出div范围的文本，从而实现省略号效果。 请注意，此方法主要基于webkit内核浏览器（如Chrome、Safari）。 对于其他浏览器，可能需要考虑兼容性方案。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！