强制中英文换行及超出显示省略号的问题

小草莓蹦蹦跳

已于 2023-09-21 01:22:30 修改

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS3 文章标签： css html css3

于 2018-09-30 12:29:04 首次发布

本文链接：https://blog.youkuaiyun.com/qq_38290251/article/details/82908054

CSS3 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍如何使用CSS控制文本布局，包括强制中英文换行、强制不换行、文本超出显示省略号及多行省略号等技巧，适用于网页设计与响应式布局优化。

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

1、强制中英文换行

当固定盒子的宽度时，中文会换行，但是英文和数字不换行。

解决的方法如下：

① 强制英文换行（二选一）

word-break: break-all;

word-wrap: break-word;

② 强制中文换行，只对中文有作用

white-space: pre-wrap;

2、强制不换行

中英文都有作用。

white-space: nowrap;

3、超出显示省略号

超出不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）

中英文都有作用。

主要代码：

white-space: nowrap; // 规定段落中的文本不换行
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 文本溢出用省略号表示

如图效果：

代码：

<div class="box-parent">
    <div class="box">大家好，我是小草莓蹦蹦跳跳，很高兴认识你</div>
    <div class="box">大家好，我是小草莓蹦蹦跳跳，66666666666</div>
    <div class="box">大家好，我是小草莓蹦蹦跳跳，aaaaaaaaaaa</div>
</div>

.box-parent {
    margin: 100px;
}

.box {
    width: 100px;
    background-color: sandybrown;
    margin-bottom: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

4、超出2行，显示省略号

超出2行不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）

中英文都有作用。

主要代码：

    overflow: hidden; // 溢出隐藏
    text-overflow: ellipsis; // 文本溢出用省略号表示
    display: -webkit-box; // 作为弹性伸缩盒子模型显示
    -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式: 从上到下垂直排列
    -webkit-line-clamp: 2; // 显示的行数

// 注意:由于上面的三个属性都是 CSS3 的属性，没有浏览器可以兼容，所以要在前面加一个 -webkit- 来兼容
部分浏览器。

如要想要超出N行再显示省略号，只要改变 -webkit-line-clamp 的值就可以。

如图效果：

<div class="box-parent">
    <div class="box">大家好，我是小草莓蹦蹦跳跳，很高兴认识你</div>
    <div class="box">大家好，我是小草莓蹦蹦跳跳，66666666666</div>
    <div class="box">大家好，我是小草莓蹦蹦跳跳，aaaaaaaaaaa</div>
</div>

.box {
    width: 100px;
    background-color: sandybrown;
    margin-bottom: 20px;
    overflow: hidden;

    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}