CSS自動換行和內嵌塊不工作

我在<div>中有長文本沒有空格（如URL）。如果我設置了display:inline-block;，那麼單詞換行不起作用！CSS自動換行和內嵌塊不工作

如果我設置了display: block，那麼word-wrap就像它應該那樣工作！但div獲得100％的寬度。

我需要尺寸div的內容。謝謝

.block { 
 
    display: block; 
 
    border-radius: 3px; 
 
    padding: 12px; 
 
    background: #DCF8C6; 
 
    color: #000000; 
 
    word-wrap: break-word; 
 
    font-size: 16px; 
 
} 
 
.inline { 
 
    display: inline-block; 
 
    border-radius: 3px; 
 
    padding: 12px; 
 
    background: #DCF8C6; 
 
    color: #000000; 
 
    word-wrap: break-word; 
 
    font-size: 16px; 
 
}

<div class='block'> 
 
    <span>veryverylongtextwithoutspaces</span> \t 
 
</div> 
 

 
I want this, but not work "word-wrap": 
 
<br> 
 
<div class='inline'> 
 
    <span>veryverylongtextwithoutspaces</span> \t 
 
</div>

來源

2015-09-29 Chirkoff

不設置'width'我們不知道什麼時候破字..也許更多上下文的方式，我可以幫助？ – stackoverfloweth

目前尚不清楚期望的結果是什麼。你爲什麼需要wordwrap？也許設置最大寬度可能是一個選擇？ –

我已經包括你的jsFiddle與你的問題內聯。 –

您必須定義的寬度爲內容的容器。此外，我相信你會想用word-break代替word-wrap

p.keep { 
 
    border: 1px solid #000; 
 
    width: 150px; 
 
    word-break: keep-all; 
 
} 
 

 
/* This will do what you want */ 
 
p.break { 
 
    border: 1px solid #000; 
 
    width: 150px; 
 
    word-break: break-all; 
 
}

<p class="keep">ThisiswaytoolongThisiswaytoolongThisiswaytoolongThisiswaytoolongThisiswaytoolong</p> 
 
<p class="break">ThisiswaytoolongThisiswaytoolongThisiswaytoolongThisiswaytoolongThisiswaytoolong</p>

來源

2015-09-29 15:50:59

CSS自動換行和內嵌塊不工作

回答

相關問題