CSS实现标题文字过长部分显示省略号的方法

近期，公司移动站重构过程中遇到了一个产品列表标题显示的问题，需求是标题仅展示两行，超出部分则用省略号代替。面对这样的需求，我们面临着不小的挑战。传统的样式控制无法直接实现换行文本的省略显示。由于我们的新移动站采用流式布局，不同分辨率的手机换行宽度各异，导致无法确定标准的字符截取范围。比如，在iPhone上15个字可以两行显示，而在三星手机上可能只能显示一行，在低分辨率手机上甚至可能已经是三行显示了。这让我们的开发团队倍感困扰。

让我们回顾一下单行文本换行的常见写法。假设我们有一个CSS样式类名为“.title”，其样式代码如下：

```css

.title {

width: 150px;

height: 25px;

line-height: 25px;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

```

上述代码是标准的单行文本溢出省略号的写法，广泛应用于各种场景。对于多行文本的显示需求，我们该如何解决呢？经过搜索，我发现了一个Chrome浏览器特有的API——webkit-line-clamp。这个API可以限制在一个容器内显示的文本行数，超出部分用省略号表示。这个API的遗憾之处在于它目前仅被Chrome浏览器支持，尚未列入W3C标准。尽管如此，由于移动端大多使用Webkit内核，因此我们可以放心地使用这个API。下面是使用webkit-line-clamp实现的示例代码：

```css

.title {

width: 150px;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box; / 显示模式设为Webkit盒子模型 /

-webkit-line-clamp: 2; / 限制文本行数 /

-webkit-box-orient: vertical; / 垂直排列文本 /

}

```

请注意，在使用webkit-line-clamp时，还需要配合使用其他CSS属性以确保正确的显示结果。虽然这个API在兼容性上有所局限，但在当前的移动端开发中可以作为一种有效的解决方案。希望这个解决方案能对你有所帮助！