HTML5中截取文字

最新推荐文章于 2021-12-21 14:51:32 发布

zlpx1983

最新推荐文章于 2021-12-21 14:51:32 发布

阅读量328

点赞数

分类专栏： HTML5 文章标签： CSS3

HTML5 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

下面的例子展示了如何在在HTML5中截取text。通过设置 text-overflow 样式为“ellipsis”。

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        .truncated {
            color: red;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique sagittis urna, at laoreet mi rutrum porta. Aenean elementum magna ut odio tincidunt aliquet.</p>
    <p class="truncated">Curabitur iaculis ullamcorper urna non varius. Vestibulum ullamcorper, tortor in mattis blandit, turpis quam placerat erat, nec ornare dui tortor vitae odio.</p>
    <p>Sed a odio felis. In placerat, velit ac tincidunt viverra, ipsum justo pretium tellus, quis tempus ipsum felis ac sem. Pellentesque in malesuada odio.</p>
 
</body>
</html>

源码下载：

truncating-text-in-html-5.zip