HTML长文本省略

在网页开发中，经常会遇到需要展示长文本的情况，如文章内容、电子书等。但是，在有限的页面空间中展示整个文本可能不太实际。为了更好地展示文本，我们可以使用省略符号（three dots，也称为ellipsis）来代替超出页面范围的部分。

如何加入省略符号

在HTML中，我们可以使用CSS来加入省略符号。具体方法如下：

<style>
    .text {
        display: -webkit-box;
        -webkit-line-clamp: 3; /*行数*/
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

<div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Phasellus vel lacus quis neque commodo interdum. 
    Nullam varius felis nec enim iaculis bibendum. 
    Donec quis diam cursus, commodo nulla quis, vehicula lorem.
</div>

上述代码通过在文本外层包含一个div元素，并给该元素添加了一个名为text的类。接着，在style标签中应用了一些CSS样式，其中最重要的是通过-webkit-line-clamp属性控制文本的行数，并在超过该行数时自动以省略符号代替。具体地，我们定义了一个-webkit-line-clamp属性，它主要控制文本的行数，同样也可以使用line-clamp属性，但目前仅部分浏览器支持该属性（比如Safari和Chrome，但不支持Firefox）。

在上面的CSS代码中，我们将-webkit-box-orient属性设置为vertical，以保证文本自上而下排列，而-webkit-box属性将文本转换为块容器。（注："box" 指 "flex box"）

当然，还可以有其他方法来实现文本省略的效果，如text-overflow属性、overflow属性等。你可以根据具体的场景选择不同的方法。

总结

通过使用省略符号，我们可以更好地呈现长文本，让网页更加雅观。在开发中，可以使用CSS属性来实现文本省略的效果，同时也要考虑兼容性和实际情况的差异。