【CSS】文本属性汇总

Silviaya

已于 2023-08-26 23:21:57 修改

阅读量67

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css

于 2023-07-04 22:27:03 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46368797/article/details/131544397

CSS 专栏收录该内容

4 篇文章

订阅专栏

文章展示了两种CSS样式处理文本溢出的方法。一是隐藏超出宽度的文本，二是用省略号表示被截断的部分。通过设置`white-space:nowrap;overflow:hidden;`和`text-overflow:ellipsis;`，可以在限制宽度的容器中优雅地管理过长的文本内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文本溢出换行

<body>
    <div>
        <p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>

    </div>
</body>

样式1：文本溢出部分隐藏

	<style>
        p {
            white-space: nowrap;
            overflow: hidden;
        }
        div {
            width: 120px;
            border: 1px solid black;
        }
    </style>

在这里插入图片描述

样式2：文本溢出部分使用省略号代替

 		p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;//关键属性
        }

        div {
            width: 120px;
            border: 1px solid black;
        }

在这里插入图片描述