css盒模型换行 |css 字体不被选中

但是，有时候盒模型中的大小不够用，导致内容超出边界而出现滚动条。例如：

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus maximus bibendum. Pellentesque quis risus vitae purus tempor viverra.</p>
</div>

以上代码将在一个200像素宽、100像素高的盒子中显示一个段落，该段落带有10像素的内边距和1像素的边框。由于内容过长，它将超出盒子的边界：

为了解决这个问题，大家可以使用CSS中的word-wrap属性。

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus maximus bibendum. Pellentesque quis risus vitae purus tempor viverra.</p>
</div>

word-wrap属性设置为break-word时，它将使长单词和URL自动换行，同时可以在单词内部添加连字符“-”。

尽管在word-wrap属性下，盒模型的大小仍然是固定的，但是长单词和URL在边界处自动换行，使内容更容易阅读。