📌  相关文章
📜  HTML | DOM 样式 wordBreak 属性(1)

📅  最后修改于: 2023-12-03 14:41:50.222000             🧑  作者: Mango

HTML | DOM 样式 wordBreak 属性

简介

HTML | DOM 样式 wordBreak 属性是用于控制元素内文本的换行行为。它定义了在哪些位置换行以及如何截断长单词。

语法
word-break: normal|break-all|keep-all|break-word|initial|inherit;
属性值
  • normal: 默认值。使用默认的换行规则。
  • break-all: 允许在任意字符之间换行。
  • keep-all: 只能在半角空格或连字符处换行。
  • break-word: 在长单词内换行，适用于非英语文本。
  • initial: 设置属性为默认值。
  • inherit: 继承父元素的属性值。
示例
<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    word-break: break-all;
}
</style>
</head>
<body>

<div>ThisIsAReallyLongWordThatDoesNotFitInsideTheDiv</div>

</body>
</html>
解释

在上面的示例中，div 元素内的文本是一个非常长的单词。由于 word-break 属性设置为 break-all，文本会在字母之间换行，以适应 div 的宽度。

浏览器支持

wordBreak 属性在所有主流浏览器中都受支持。

  • Chrome
  • Firefox
  • Safari
  • Internet Explorer
  • Opera
总结

wordBreak 属性可以控制元素内文本的换行方式。根据具体需求，可以选择不同的属性值来实现不同的换行效果。