html - 如何包装包含包含要包装的文本的跨度的 div？

Question

给定这个标记

<div>
    <span>foo</span>
    <span>bar</span>
    <span>some really long text with word breaks</span>
    <span>baz</span>
</div>

这显示为

foo bar some really long text with word breaks baz

我希望它显示为

foo bar some really 
long text with word 
breaks baz

使用这些其他问题的答案:

• > Make text wrap inside an absolutely positioned div
• > CSS word-wrapping in div

如果 <div> 我能够完成这个直接包含文本。但是一旦文本被拆分成 <span>在 ` 这些技术不再有效。

鉴于我无法取消 <span> s，我该怎么做呢？

---

编辑:

Chrome 网络检查器列出了 <div>的当前 CSS 为:

color: rgb(0, 105, 173);
display: block;
font-family: Arial, sans-serif;
font-size: 25px;
font-weight: bold;
height: 93px;
margin-bottom: 0px;
margin-left: 208px;
margin-right: 208px;
margin-top: 0px;
text-align: center;
text-shadow: rgb(255, 255, 255) 0px 0px 3px;
width: 300px;

Answer 1

首先你必须设置那个元素的宽度。

div{
    width: 250px;
    word-wrap: break-word; /*if you want to allow unbreakable words to be broken*/
    display: inline-block; /*The element is placed as an inline element, but it behaves as a block element*/
}

Live demo - JSFiddle