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

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

如果<div>直接包含文本，我就能完成此操作。但是，一旦文本被分成<span> s里面，这些技术就不再适用了。

鉴于我无法取消<span>，我该如何去做呢？

编辑：

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的宽度

div{width: 120px;}

demo

Answer 2

首先必须设置该元素的宽度。

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

Answer 3

试试这个......

div
{

    text-align:justify;
    width:130px;

}

<强> Demo

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

3 个答案: