Guidebook

# text-overflow

text-overflow CSS (opens new window) 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号（'...'，U + 2026 HORIZONTAL ELLIPSIS）或显示一个自定义字符串。

这个属性并不会强制“溢出”事件的发生，因此为了能让"text-overflow"能够生效，程序员们必须要在元素上添加几个额外的属性，比如"将overflow (opens new window) 设置为hidden"。

# 单行文本溢出

/*单行文本溢出*/
.one-txt-cut {
    overflow: hidden;
    /* 文字在一行显示, 不换行 */
    white-space: nowrap;
    /* 文字溢出显示省略号 */
    text-overflow: ellipsis;
}
1
2
3
4
5
6
7
8

必要要求：

  1. 必须是块元素
  2. text-overflow: ellipsis;属性
  3. 设置overflow: hidden;

# 多行文本溢出

/*多行文本溢出*/
.txt-cut {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
1
2
3
4
5
6
7
8

# white-space

https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space (opens new window)

white-space CSS 属性是用来设置如何处理元素中的 空白 (opens new window)

  • nowrap

    文本不换行，文字在一行上持续渲染。直到遇到br标签

    和 normal 一样，连续的空白符会被合并。但文本内的换行无效。

    文本内的空格会渲染，\n不会渲染，文字可以溢出元素

  • pre

    连续的空白符会被保留。在遇到换行符或者 br 元素时才会换行。

    行为类似于 pre 标签

    即文本内的空格和\n 会被渲染出来，文字可以溢出元素

  • pre-wrap

    比pre多出一个文字溢出时会自动换行的行为

  • pre-line

tailwindcss

.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre	{
  white-space: pre;
}
1
2
3
4
5
6

# word-break

https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break

word-break 指定了怎样在单词内断行，word-break 用于对长单词打断。

keep-all 保持所有单词连在一起，不进行断行

# white-space: nowrap和word-break: keep-all的区别

  • white-space: nowrap 属性指定文本不换行，强制在一行内显示。这意味着文本会溢出容器的边界而不自动换行。

  • word-break: keep-all 属性指定保持所有单词连在一起，不进行断行。这意味着只有在遇到空格或其他可打断点的字符时才会进行换行，而不会在单词内部断行。

这两个属性通常一起使用，以确保文本在容器中不换行，并且尽可能地保持每个单词完整显示。

# 文字之间间距letter-spacing

/* Keyword value */
letter-spacing: normal;

/* <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;
1
2
3
4
5
6
7

← line-height行高 →