如何防止长单词破坏我的 DIV 布局？

防止长单词破坏你的 Div

从基于表格的布局切换到基于 DIV 的布局时，仍然存在一个常见问题：长单词溢出 DIV 列的边缘，非常难看。这个问题甚至困扰着主要网站，并且在德语等语言中尤为普遍，即使日常单词也可能很长。

解决方案：

软连字符

使用软连字符 (­) 使您能够指定浏览器应中断的位置长单词：

averyvery­longword

此字符允许浏览器将单词呈现为“averyverylongword”或“averyvery-

longword。”

正则表达式可以帮助战略性地插入软连字符：

/([^\s-]{5})([^\s-]{5})/ → ­

元素

或者，注入 HTML5 元素，以前的 IE-ism：

averyvery<wbr>longword

这会破坏没有连字符的单词，导致“averyvery

长单词。”

CSS 连字符

最新版本的 IE、Firefox 和 Safari 支持（不是 Chrome），CSS 连字符启用自动连字符：

div.breaking {
  hyphens: auto;
}

请注意，此功能依赖于连字符字典，并且可能并不总是一致地断开长单词。

溢出和白色-space: 预换行

其他可行的解决方案包括控制溢出和设置空白pre-wrap:

div.breaking {
  overflow: hidden;
  white-space: pre-wrap;
}

这两种方法都可以防止长单词超出 DIV 的边界。

以上是如何防止长单词破坏我的 DIV 布局？的详细内容。更多信息请关注PHP中文网其他相关文章！