溢出隐藏和换行的一些注意事项【CSS plan】当文字超出时：可以选择文本溢出省略加hover显示全部内容，也可以进行

前言：

当文字超出时：可以选择文本溢出省略加hover显示全部内容，也可以进行换行操作。

第一部分：主要梳理一下有关单行溢出省略和多行溢出省略

第二部分：在需要换行的需求中,如果有字母，并且长度过长，会造成整个单词换行。

css 溢出隐藏

1.单行溢出隐藏

width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

2.多行文本溢出省略（按行）

纯css实现

<style>
        .title {
            -webkit-line-clamp: 2;
            /* 显示几行 */;
            display: -webkit-box;
            /* 弹性伸缩盒子 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
</style>
<body>
    <div class="title">hahahahahhah哈哈哈哈或或或或或或哈哈哈11哈哈哈哈hhahuhuxugwbxywhgxyvh</div>
</body>

效果：显示两行，超出省略

3. 多行文本溢出不显示省略（按高度）

overflow: hidden;
line-height: 20px;
max-height: 40px;

效果：只有换行，没省略：由高度去确定换几行

4. 多行溢出，省略

（伪元素）

.demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
.demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }

效果不太好，意思应该就是直接把这个省略号放在最右边。。。。不太靠谱。。

在完成需要换行的业务需求过程中我们通常使用的是下面这部分代码实现：

（单文本）会正常的换行：

// 设定一个宽度，换行
width:100px;
white-space:wrap; 
overflow:hidden;

但是当里面出现文字和英文一起的时候：如果单词长度过长，会出现下面的现象：\

可以看到，整个英文这块直接放到了下一行。因为浏览器会将整个这一段英文作为一个单词，第一行放不下了，就直接放到了第二行

因此下面有一些文字和英文的换行，要了解一下哈：

5. 字母换行规则

word-break:break-all; 只对英文起作用，以字母作为换行依据。

当尾部放不下一个单词的时候:

1. normal 浏览器默认换行规则

2. break-all 强制换行（把单词拆开放）

3. kepp-all 整个单词换行

word-wrap:break-word; 只对英文起作用，以单词作为换行依据。 normal 浏览器默认换行规则 break-word 当单词太长时，先尝试换行，换行后还是太长，单词内还可以换行
white-space:pre-wrap; 只对中文起作用，强制换行。

normal | nowrap | pre | pre-wrap | pre-line;

pre: 保留空格和回车不允许换行

pre-wrap: 保留空格和回车允许换行

pre-line: 合并空格，允许拆行

white-space:nowrap; 强制不换行，都起作用。

注意：

word-wrap：决定句尾放不下单词时，单词是否换行。
word-break：决定单词内该怎么换行。
white-space: pre-wrap 来解决多空格压缩显示问题。

<style>
    .demo {
        width: 600px;
        /* 单词直接折断 */
        /* word-break: break-all;  */
        /* 如果放不下这个单词，就直接换行 浏览器默认 */
        /* word-break:normal; */
        /* 没有换行，直接超出 截断 */
        word-break: keep-all;
        overflow: hidden;
        white-space: wrap;
        }
</style>

<body>
    <div class="demo">
        hhhahahahahhahahhaha哈哈哈u哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈hgdcfdcdcfvxyvh
    </div>
</body>

具体在浏览器中的展示

word-break: break-all;

word-break:normal;

word-break: keep-all; 后面超出的直接截断没有了

如果加上溢出省略功能：

text-overflow: ellipsis;

溢出隐藏和换行的一些注意事项 【CSS plan】

前言：