css 如何控制文字换行、省略

最新推荐文章于 2025-07-04 23:15:00 发布

00程序媛

最新推荐文章于 2025-07-04 23:15:00 发布

阅读量4.2k

点赞数 5

CC 4.0 BY-SA版权

文章标签： css 前端 html css3

本文链接：https://blog.csdn.net/XloveL2021924/article/details/127549152

该博客主要分享了CSS中关于文字换行和文本超出显示省略号的相关属性。包括white - space用于文字换行、word - break用于单词换行、word - wrap用于字母换行，以及text - overflow可让文本超出显示省略号，并给出了各属性值。

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

1. white-space 文字换行

属性值如下：

值	描述
normal	默认值。空白会被浏览器忽略
pre	空白会被浏览器保留。其行为方式类似HTML中的 `pre` 标签
nowrap	文本不会换行，文本会在同一行上继续，直到遇到 `br` 标签为止
pre-wrap	保留空白符序列，但是正常地进行换行
pre-line	合并空白符序列，但是保留换行符
inherit	规定应该从父元素继承 `white-space` 属性的值

2. word-break 单词换行

属性值如下：

值	描述
normal	使用浏览器默认的换行规则
break-all	允许在单词内换行
keep-all	只能在半角空格或连字符处换行

在这里插入图片描述

<style>
    .root{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        word-break: break-all;
    }
</style>

<div class="root">
    veryhappyveryhappyveryhappyveryhappyveryhappyveryhappyveryhappy
</div>

在这里插入图片描述

3. word-wrap 字母换行

属性值如下：

值	描述
normal	只在允许的断字点换行（浏览器保持沉默处理）
break-word	在长单词或URL地址内部进行换行

在这里插入图片描述

<style>
   .root{
       width: 200px;
       height: 200px;
       border: 1px solid red;
       word-wrap: break-word;
   }
</style>

<div class="root">
   hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</div>

在这里插入图片描述

4. text-overflow 文本超出显示省略号

属性值如下：

值	描述
clip	剪切文本
ellipsis	显示省略符号 `...` 来代表被修剪的文本
string	使用给定的字符串来代表被修剪的文本

<style>
   .root {
       width: 200px;
       height: 100px;
       border: 1px solid red;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap; /* 或者 word-break: break-all; */
   }
</style>

<div class="root">
    veryhappyveryhappyveryhappyveryhappyveryhappyvery
</div>