admin管理员组

文章数量:1794759

overflow

overflow

overflow-wrap

overflow-wrap属性在CSS文本中是比较常用的，本部将带你深入理解overflow-wrap属性的各个方面，包括它的语法、取值、作用和浏览器兼容性，最后附上overflow-wrap的实例，希望能够对你有所帮助。

overflow-wrap定义和用法

overflow-wrap: normal | break-word

  • 默认值：normal
  • 适用于：所有元素
  • 继承性：有
  • 动画性：否
  • 计算值：指定值
  • 相关属性：[ word-wrap ] || [ word-break ]

overflow-wrap属性值

  • normal: 允许内容顶开或溢出指定的容器边界。
  • break-word: 内容将在边界内换行。如果需要，单词内部允许断行。

overflow-wrap说明

设置或检索当内容超过指定容器的边界时是否断行。

CSS3中将 word-wrap 改名为 overflow-wrap；

由于历史原因，当你使用 overflow-warp 时，最好同时使用 word-wrap 作为备选，作向前兼容。

对应的脚本特性为 overflowWrap。

overflow-wrap浏览器支持

overflow-wrap实例

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="utf-8" /><title>CSS overflow-wrap属性详解-CSS</title><style>.test p {width: 100px;border: 1px solid #000;background-color: #eee;}.normal p {word-wrap: normal;overflow-wrap: normal;}.break-word p {word-wrap: break-word;overflow-wrap: break-word;}</style></head><body><ul class="test"><li class="normal"><strong>normal:</strong><p>abcabcabcabcabcabcabcabcabcabcabcabcabcabcabcab</p></li><li class="break-word"><strong>break-word:</strong><p>abcabcabcabcabcabcabcabcabcabcabcabcabcabcabcab</p></li><li class="break-word"><strong>break-word:</strong><p>中英混排的时候abcabcabcabcabcabcabcabcabcabcabcab</p></li></ul></body>
</html>

效果：

本文标签： overflow

版权声明：本文标题：overflow 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1702648128a454467.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。