表格 td 内容换行

nancy lyn

已于 2023-12-08 10:16:25 修改

阅读量719

点赞数 1

文章标签：开发语言 css3 html5 css

于 2023-11-14 13:55:38 首次发布

本文链接：https://blog.csdn.net/qq_45934297/article/details/134395074

版权

word-break：break-all 和 word-wrap：word-break 的区别

white-space

参考链接：

在 td 中加如下代码：

word-wrap:break-word;
word-break:break-all;
white-space:normal;

由于项目比较着急，这样设置有效之后就没有继续研究，现在回来仔细了解一下 word-break、word-wrap 和 white-space。

word-break

指定了怎样在单词内断行。

主要属性如下：

/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* deprecated */

/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;

normal

默认断行，CJK(即 Chinese/Japanese/Koean，中日韩) 文本插入断行，其它文本不插入断行。

<body>
  <p class="narrow normal">
He saw the lights of the house again on the horizon and thought he ought to ask.地平線の上にまた見える家の灯を見てそれを訊くべきだと思いました。
    在他既往的平稳生活中这样突如其来的情绪变化是很不寻常的但如今他的心思就是捉摸不定
    그는 지평선 위에 다시 집의 불빛이 나타나는 것을 보고 무언가 물어야 한다고 느꼈123456789123456789123456789123456789123456789 abcdefg 123456789
  </p>
</body>

.narrow {
  padding: 10px;
  border: 1px solid;
  width: 500px;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
}

.normal {
  word-break: normal;
}

break-all

所有文本都会插入断行，对于 non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

<body>
  <p class="narrow breakAll">
He saw the lights of the house again on the horizon and thought he ought to ask.地平線の上にまた見える家の灯を見てそれを訊くべきだと思いました。
    在他既往的平稳生活中这样突如其来的情绪变化是很不寻常的但如今他的心思就是捉摸不定
    그는 지평선 위에 다시 집의 불빛이 나타나는 것을 보고 무언가 물어야 한다고 느꼈123456789123456789123456789123456789123456789 abcdefg 123456789
  </p>
</body>

.breakAll {
  word-break: break-all;
}

keep-all

CJK 文本不断行。Non-CJK 文本表现同 normal，默认断行。

<body>
  <p class="narrow keepAll">
He saw the lights of the house again on the horizon and thought he ought to ask.地平線の上にまた見える家の灯を見てそれを訊くべきだと思いました。
    在他既往的平稳生活中这样突如其来的情绪变化是很不寻常的但如今他的心思就是捉摸不定
    그는 지평선 위에 다시 집의 불빛이 나타나는 것을 보고 무언가 물어야 한다고 느꼈123456789123456789123456789123456789123456789 abcdefg 123456789
  </p>
</body>

.keepAll {
  word-break: keep-all;
}

break-word

他的效果和 break-all 很像，但是 break-all 在行末尾遇到一个长单词的时候，会把单词截断，break-word 会把长单词看做一个整体，第一行放不下就会到第二行，不会把单词截断。

<body>
  <p class="narrow breakWord">
He saw the lights of the house again on the horizon and thought he ought to ask.地平線の上にまた見える家の灯を見てそれを訊くべきだと思いました。
    在他既往的平稳生活中这样突如其来的情绪变化是很不寻常的但如今他的心思就是捉摸不定
    그는 지평선 위에 다시 집의 불빛이 나타나는 것을 보고 무언가 물어야 한다고 느꼈123456789123456789123456789123456789123456789 abcdefg 123456789
  </p>
</body>

.breakWord {
  word-break: break-word;
}

word-wrap

用来设置浏览器是否应该在一个本来不能断开的字符串中插入换行符，以防止文本溢出其行向盒。

主要属性如下：

/* 关键词值 */
word-wrap: normal;
word-wrap: break-word;

normal

默认断行，只能在正常的单词断点（例如两个单词之间的空格）处换行，不会在非 CJK 单词中插入断行。

<body>
  <p class="narrow normal">
    He saw the lights of the house again on the horizon and thought he ought to ask.
    thoughtthoughtthoughtthoughtthoughtthoughtthoughtt
  </p>
</body>

p {
  width: 300px;
  margin: 2px;
  border:1px solid black;
  padding:5px;
}

.normal{
  word-wrap: normal;
}

break-word

行中没有其他可接受的断点，则允许在任意点将通常不可断的单词换行。

<body>
  <p class="narrow break-word">
    He saw the lights of the house again on the horizon and thought he ought to ask.
    thoughtthoughtthoughtthoughtthoughtthoughtthoughtt
  </p>
</body>

.break-word {
  word-wrap: break-word;
}

word-break：break-all 和 word-wrap：word-break 的区别

类似于 word-break：break-all 和 woed-break：break-word

white-space

用于设置如何处理元素内的空白元素

white-space的值默认为 normal 的时候，word-break 和 word-wrap 可以生效，如果white-space的值为nowrap，会阻止文本换行，word-break 和 word-wrap就不生效了。

参考链接：

word-break 和 word-wrap 的区别-腾讯云开发者社区-腾讯云 (tencent.com)

word-break - CSS：层叠样式表 | MDN (mozilla.org)

white-space - CSS：层叠样式表 | MDN (mozilla.org)

overflow-wrap - CSS：层叠样式表 | MDN (mozilla.org)