多余文本显示省略号

最新推荐文章于 2023-06-10 15:42:04 发布

doomliu

最新推荐文章于 2023-06-10 15:42:04 发布

阅读量776

点赞数 1

分类专栏：前端-工作中遇到的问题-gsx

本文链接：https://blog.csdn.net/qq_38652603/article/details/72929844

版权

前端-工作中遇到的问题-gsx 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.背景：

有时候会遇到这样的需求，在一个元素中显示文本，元素宽度固定，高度为一行，如果文本字数过多，则显示省略号。

2.代码：

<!DOCTYPE html>
<html>
<head>
    <title>test label</title>
    <style type="text/css">
        #test {
            display: inline-block;
            max-width: 260px;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 100%;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<span id="test">
    123456789012345678901234567890123456789012345678901234567890
</span>
</body>
</html>

3.说明：

display: inline-block 行内元素需要设置改样式，以便设置宽度能生效，如果是块级元素则不需要设置改样式

max-width: 260px 设置最大宽度，文本过多超出这个宽度是会显示省略号

overflow: hidden 设置该样式，以保证文本宽度超出max-width时不会溢出

text-overflow： ellipsis 该样式表示超出元素宽度时，显示方式，ellipsis是省略号

white-space： nowrap 这个样式表示，不折行，即都显示在同一行