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

目录

1、强制中英文换行

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

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

2、强制不换行

3、超出显示省略号

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

---

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;
}