CSS溢出文字省列号显示怎么做？

最新推荐文章于 2023-11-20 09:15:22 发布

奶盖不加糖

最新推荐文章于 2023-11-20 09:15:22 发布

阅读量222

点赞数

文章标签： css css3 html5 html

本文链接：https://blog.csdn.net/qq_44156869/article/details/113882624

版权

CSS 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

溢出文字省列号

white-space 设置或检索对象文本显示方式。通常我们用于强制一行显示内容。

white-space ：normal ; 默认处理方式
white-space : nowrap ; 强制在同一行显示所有文本，直到文本结束或者遇到br 标签对象换行。

tex-overflow 文字溢出

设置或检索是否使用一个省略标记（…）标示对象内文本溢出

tex-overflow : clip; 不显示省略标记（…），而是简单的裁切。
tex-overflow : ellipsis; 当对象内文本溢出时显示省略标记（…）

注意：
一定要首先强制一行内显示，再次和overflow 属性搭配使用

三步走：

先强调一行内显示文本。
white-space: nowrap;
超出的部分隐藏。
overflow: hidden;
文字用省略号代替超出部分。
text-overflow: ellipsis;

<head>
    <style>
        div {
            width: 150px;
            height: 25px;
            border: 1px solid pink;
            /*当文字显示不开的时候，自动换行*/
            /* white-space: normal; */
            /*1.要文字强制一行内显示，除非遇到 br*/
            white-space: nowrap;
            /*2.溢出隐藏*/
            overflow: hidden;
            /*3.文字溢出 用省略号代替 ellipsis*/
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>致敬 保家卫国守土安疆的英雄们 </div>
</body>