html - 数字不会以固定宽度换行

标签 html css

我有两个 <div> .其中之一带有“Lorem ipsum”文本,第二个带有数字。我发现,div对于数字,不要将数字换行到固定宽度的新行 <div> .有没有人可以解释,为什么数字不换行,也许这种情况在规范的某处描述过?

JSFiddle .

div {
  width: 200px;
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quasi consequatur nobis magni molestias repudiandae rerum quisquam quo dolore dolorem! Sit eligendi accusamus aliquam consectetur inventore minima, fugiat qui quia.</div>
<div>111111111111111111111111111111111111111111111111</div>

最佳答案

因为浏览器将数字视为常规文本并且不会中断它,除非您用类似 word-wrap 的方式告诉它或 word-break属性(property)。添加如下规则:

div {
  width: 200px;
  word-wrap:break-word;
}

这样做。

jsFiddle example

关于html - 数字不会以固定宽度换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37036265/

相关文章:

jQuery 在每次输入提交时将列表项更紧密地附加在一起

html - 如何确保子元素不会掩盖插入阴影?

javascript 添加调整大小功能

javascript - flex 元素是否有可能与它们上方的元素紧密对齐?

html - 没有固定高度的可滚动div不起作用

php - 相对定位导致的 HTML 布局额外间距

css - 如何将一张 table 拉伸(stretch)到另一张 table 的高度?

javascript - HTML <a> 标签更改 url 但不移动浏览器位置

html - 如何让我的图标与我的矩形显示在同一行?

HTML 选择下拉箭头样式