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

鑑於這種標記如何將包含包含要包裝文本的跨度的div包裝？

<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>這些技術內部不再有效。

鑑於我無法取消<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;

來源

2013-08-07 bguiz

我不太看是什麼問題：http://jsfiddle.net/ audetwebdesign/57cdP/div是否會被絕對定位？ –

@MarcAudet：我增加了寬度，無濟於事。我已經列出了當前的CSS上面 – bguiz

您必須首先設置該元素的寬度。

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

來源

2013-08-07 04:03:17

'display：inline-block'爲我做到了！不完全確定爲什麼，但CSS有其神祕的方式！ – bguiz

有什麼問題？你想爲它演示嗎？ –

這是一個小演示顯示屬性.. http://jsfiddle.net/3tR6U/ –

你應該定義你的div的寬度

div{width: 120px;}

demo

來源

2013-08-07 03:39:46

C-Link：我已經增加了寬度，沒有用。我列出了當前的 – bguiz

以上的CSS有什麼問題？你想要像這樣http://jsfiddle.net/Mk9gF/1/ –

就試試這個...

div 
{ 

    text-align:justify; 
    width:130px; 

}

Demo

來源

2013-08-07 05:29:24

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

回答

相關問題