文本换行

[981377660LMT]

1. 单行文本溢出显示省略号 如果你想让单行文本在溢出时显示省略号，你可以使用以下CSS样式：

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这里的white-space: nowrap;保证文本在一行内显示，overflow: hidden;用于隐藏超出div的文本，text-overflow: ellipsis;则是在文本溢出时显示省略号。

这样，当div内的文本长度超过其宽度时，超出的部分就会被替换为省略号。

2. 多行文本溢出显示省略号 如果你想让多行文本在溢出时显示省略号，你可以使用以下CSS样式：

div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: N; /* 'N' 是你想显示的行数 */
  overflow: hidden;
}

这种方法使用了WebKit的非标准CSS属性，因此只在WebKit浏览器（如Chrome和Safari）中有效。-webkit-line-clamp属性用于限制在一个块元素显示的文本的行数。N是你想要显示的文本的行数。超出这个行数的文本会被截断并显示省略号。

注意，这种方法不是标准的CSS，可能在非WebKit浏览器中无效。

[981377660LMT]

break 与 breakAll 区别 （与换行无关，只与分割单词有关）

在CSS中，word-break属性用于指定如何断开单词以改进行内布局。它有两个常用的值：break-all和keep-all。

• break-all：不考虑语言，允许在任何字符间断行。
• keep-all：只能在半角空格或连字符处断行。

这两个值主要在处理CJK（中文、日文、韩文）和非CJK文本时有所不同。对于非CJK文本，break-all允许在任何字符间断行，而keep-all只在空格或连字符处断行。

例如：

div {
  word-break: break-all;
}

在这个例子中，div内的文本会在任何字符间断行。

div {
  word-break: keep-all;
}

在这个例子中，div内的文本只会在空格或连字符处断行。

因此，break 对应 word-break: keep-all，breakAll 对应 word-break: break-all.

[981377660LMT]

text-overflow: ellipsis

1. text-overflow: ellipsis;应该被应用到需要显示省略号的文本元素上。
2. text-overflow: ellipsis;只对单行文本有效。如果你想让它在多行文本上也有效，你需要使用一些非标准的CSS属性，如-webkit-line-clamp和-webkit-box-orient。

[981377660LMT]

white-space、overflow-wrap、word-wrap 区别

• white-space: nowrap;：这个属性设置元素内的文本在何处换行。nowrap值表示文本不会换行，文本会在一行中连续显示，直到遇到<br>标签为止。

• overflow-wrap: break-word;和word-wrap: break-word;：这两个属性是相同的，word-wrap是overflow-wrap的旧名称。这个属性指定了浏览器应如何断开单词以防止溢出。break-word值表示在单词内部断行。

这三个属性在处理单行文本溢出时的区别主要在于：

• 如果你想让单行文本在溢出时显示省略号，你应该使用white-space: nowrap;和text-overflow: ellipsis;。

• 如果你想让单行文本在溢出时自动换行，你应该使用overflow-wrap: break-word;或word-wrap: break-word;。

注意，overflow-wrap: break-word;和word-wrap: break-word;只在单词长度超过其容器宽度时才会断行，如果单词可以在容器内完全显示，那么它们不会断行。

[981377660LMT]

white-space、overflow-wrap、word-wrap 、word-break 区别

• white-space：这个属性用于设置如何处理元素中的空白。它的值包括normal（默认值，自动换行）、nowrap（不换行）、pre（保留空白和换行符）、pre-wrap（保留空白和换行符，但是会自动换行）和pre-line（合并空白，但是保留换行符）。

• overflow-wrap和word-wrap：这两个属性是相同的，word-wrap是overflow-wrap的旧名称。这个属性用于指定浏览器应如何断开单词以防止溢出。它的值包括normal（只在空格和连字符处断行）和break-word（在单词内部断行）。

• word-break：这个属性用于设置如何断开单词以改进行内布局。它的值包括normal（使用默认的断行规则）、break-all（不考虑语言，允许在任何字符间断行）和keep-all（只能在半角空格或连字符处断行）。

这四个属性在处理文本溢出和换行时都有各自的作用，可以根据需要进行组合使用。例如，如果你想让单行文本在溢出时显示省略号，你可以使用white-space: nowrap;和text-overflow: ellipsis;。如果你想让单行文本在溢出时自动换行，你可以使用overflow-wrap: break-word;或word-wrap: break-word;。

[981377660LMT]

示例：

你的代码中，text-overflow: ellipsis;属性被应用到了.header元素上，而不是.file-name元素上。text-overflow: ellipsis;应该被应用到需要显示省略号的文本元素上。

另外，text-overflow: ellipsis;只对单行文本有效。如果你想让它在多行文本上也有效，你需要使用一些非标准的CSS属性，如-webkit-line-clamp和-webkit-box-orient。

以下是一个修正后的例子：

.header {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 64px;
  height: 32px;
  background: red;
  overflow-wrap: break-word;
  overflow: hidden;
  .file-name {
    font-family: PingFangSC;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
    letter-spacing: 0px;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

在这个例子中，text-overflow: ellipsis;，-webkit-line-clamp: 2;和-webkit-box-orient: vertical;被应用到了.file-name元素上，这样超出两行的文本就会被截断并显示省略号。