css文字超出显示省略号

. . . . .

5902人浏览 · 2020-04-16 10:43:24

. . . . . · 2020-04-16 10:43:24 发布

省略号原理：

省略号生效的前提必须有明确的宽度限制，但这绝对不等于“必须给父容器指定一个固定的宽度”。

在现代前端开发（尤其是响应式布局）中，我们极少写死宽度。只要文本所在的容器能够计算出一个**“有限的边界”**，省略号就能正常触发。

除了直接指定 width，以下几种常见的场景都能满足“明确宽度限制”的要求：

1. 使用 max-width 限制（推荐）
你可以不写死 width，而是给一个 max-width。

.text-box {
  max-width: 300px; /* 只要不超过300px，盒子可以随意收缩 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2. 依靠 Flex 布局的“挤压”
在 Flex 布局中，只要父容器有宽度限制（比如占满屏幕），子元素配合 flex: 1 和 min-width: 0，就能获得一个由浏览器动态计算出来的“隐式宽度”。
这种情况下，你完全不需要给文本盒子写任何 width 或 max-width，它被 Flex 父级挤压后的实际渲染宽度，就是触发省略号的边界。

3. 依靠 CSS Grid 的轨道限制
在 Grid 布局中，只要网格轨道（Track）的尺寸是受限的（比如 grid-template-columns: 1fr 2fr 或使用了 minmax()），放在格子里的文本元素同样会自动获得明确的宽度限制，从而触发省略号。

4. 表格布局（table-layout: fixed）
在表格中，如果设置了 table-layout: fixed，单元格的宽度就会受到表格整体宽度的严格限制，此时在单元格内的文本也能正常触发省略号。

💡 总结一下：
触发省略号的“紧箍咒”，可以是：

显式的：width、max-width
隐式的：Flex 子项被挤压后的宽度、Grid 单元格的宽度、表格固定布局的宽度。

这背后的逻辑其实非常朴素：省略号触发的核心前提是“容器装不下文字了”。

但如果给文本盒子设置了 width: fit-content，或者它是一个普通的内联元素（比如没有转成 block 或 inline-block 的 <span>），那么盒子会完全“看文字的脸色行事”——文字有多长，盒子就自动撑多宽。
在这种情况下，文字永远觉得“我很宽敞”，所以省略号永远不会出现。

flex布局中如果出现省略号不生效，核心逻辑可以精简为以下三点：

1. 核心矛盾：宽度谁说了算？

失效原因（width: fit-content）：这个属性会让文字有多长盒子就撑多宽。既然盒子永远装得下文字，自然永远不会触发“省略号”。
解决思路：去掉 fit-content，让盒子“看父容器脸色行事”，父容器给多少宽度，盒子就只能占多少。

2. 关键阻碍：Flex 的默认“死撑”机制

在 Flex 布局中，子元素的默认 min-width是auto。这意味着子元素会**死撑**着不让自己比内容更窄，哪怕父容器空间不够，它也会直接溢出，导致省略号依然无法触发。

3. 终极解法：minWidth: 0

加上 minWidth: 0，相当于打破了 Flex 子元素的“死撑”限制，允许父容器把它强行压窄。
一旦盒子被压窄，文字放不下时，省略号就能正常出现了。

一句话总结：
想让 Flex 里的文本省略号生效，必须去掉让盒子无限变宽的 fit-content，并加上允许盒子被压扁的 minWidth: 0。

单行实现：

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                margin:0 auto ;
                width:300px;
                color: red;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        </style>
    </head>

    <body>
        <div>单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略</div>
    </body>

</html>

结果：

在这里插入图片描述

多行实现：

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-all; // 解决如果是全是字母情况下不换行问题

在这里插入图片描述

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-line-clamp

例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                margin: 0 auto;
                width: 300px;
                color: red;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
        </style>
    </head>

    <body>
        <div>多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略</div>
    </body>

</html>