CSS：將浮動圖像的文字換行分隔符應用於流體寬度文本

我需要打破長單詞，例如長鏈接。我正在處理的佈局是流體佈局，因此不提供固定寬度。取而代之的是，我需要我的文本塊來適應任何容器的寬度，並且會得到很長的文字，以便它們可以證明任何寬度。CSS：將浮動圖像的文字換行分隔符應用於流體寬度文本

你有一個http://jsfiddle.net/cYDJd/1/的例子，在這個例子中你將看到一個很長的鏈接，當圖像在左邊浮動時，它不會被CSS規則word-wrap: break-word;破壞。只有當長鏈接低於圖像時，word-wrap才能正常工作。

在這裏，你有的jsfiddle代碼的簡化版本：

CSS：

.left { 
    float: left; 
} 
.justified-block { 
    text-align: justify; 
    word-wrap:break-word; 
}

HTML：

<a href="#" class="left"><img src="some-image.jpg" /></a> 
<p class="justified-block">Some text with a very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong link.</p>

我會非常感謝你的善良的建議。

來源

2013-08-22 Gerard

可能重複：http://stackoverflow.com/questions/6855979/break-long-word- around-floating-image – andi

謝謝你。我只是希望用CSS而不是PHP解決它。無論如何，目前我會接受Susam的腳本作爲解決方案（http://stackoverflow.com/a/6856297/2253064），但是我將使用''作爲''在Opera中尚不支持。 – Gerard

-1

是這樣的嗎？

我didn't檢查任何瀏覽器的支持：/

http://jsfiddle.net/insan3/nrQFQ/2/

<style> 
.block{ 
width: 200px; 
display: block; 
border: 1px solid #DDD; 
display: table; 
} 

.block a{ 
text-transform: uppercase; 
} 
.s1x{ font-size: 10px;} 
.s2x{ font-size: 14px;} 
.s3x{ font-size: 16px;} 

.word-break{ 
word-wrap: break-word; 
word-break: break-all; 
} 
</style> 

<span class="block"> 
<p class="word-break"><a class="s1x" href="#">&bull;Current Lipsum Content Link Here it &bull;</a><a class="s3x" href="#">Current Lipsum Content Link Here it Current&bull;</a><a class="s1x" href="#"> Lipsum Content Link Here it Current Lipsum Content Link Here&bull;</a> <a class="s3x" href="#">it Current Lipsum Content Link Here it Current Lipsum Content Link Here it&bull;</a></p>

來源

2013-10-05 03:28:40 insan3

CSS：將浮動圖像的文字換行分隔符應用於流體寬度文本

回答

相關問題