CSS力換行符

Question

我有什麼：

HTML：

<div class="container"> 
    <div class="text"> 
     Some long text 
    </div> 
    <div class="extendable"> 
     <img> 
    </div> 
</div> 

CSS：

.container { 
    float: right; 
    min-width: 10em; 
    padding-left: 1em; 
    .text { 
     padding: 0.3em; 
    } 
} 

每塊都有動態的寬度和高度。
http://jsfiddle.net/vZ4eA/

我想要什麼：
.text不應該是能夠擴展.container如果內容變得太大。應該有一個強制換行符。
.extendable另一方面應該使container更大，如果內容超過寬度（表現正常）。

Answer 1

您需要在上設置固定寬度10然後使用word-break:break-all;

使用jQuery，您可以將.text的寬度設置爲.extendable的寬度。

var exWidth = $('.extendable').css('width'); 
$('.text').css('width', exWidth); 

http://jsfiddle.net/vZ4eA/16/

編輯：CSS只有

你可以嘗試把.text內.extendable。

在這裏看到：http://jsfiddle.net/vZ4eA/18/

編輯2：CSS：

從這個答案https://stackoverflow.com/a/7231607/1399670我已經更新了小提琴滿足您的要求提供一些幫助。

http://jsfiddle.net/vZ4eA/20/

Answer 2

您可以使用max-width文本連同nowrap

.text{ 
padding: .3em; 
border: 1px solid red; 
max-width: 200px; 
word-break: break-all; 
display: block; 

} 

Working Example

編輯：

要到下面的評論的一個響應，max-width也許應該是一個動態值爲了與容器的動態寬度一起工作。你可以很容易地實現與javascript或jQuery

jQuery的這種行爲

我建議你看看this plugin處理您div

$("#div").resize(function(e){ 
    $(".text").css({"max-width" : $(this).css("max-width") }); 
}); 

Answer 3

唯一的方法重新大小我能想到的應用這裏將設置最大寬度.text

Answer 4

你可能不得不爲.container調整大小以動態更新的.text的最大寬度;特別是在頁面加載和視口大小調整時。你可以這樣做using jQuery。