多行文本填充

Question

我有以下結構：

<div class="1"> 
    <div class="2"> 
    2. 
    </div> 
    <div class="3"> 
    3. 
    </div> 
    <div class="4"> 
    very long line of text 
    </div> 
</div> 

所以div 1具有display: block，所有該有的都有display: inline。 我的目標是使顯示此很長的文本行這樣的：

2. 3. very long 
     line of text 

，如果我嘗試做div 4的inline-block或inline-flex並設置margin和text-indent特性，那麼它還挺我想要做什麼，但它也將整行文本向下移動一行，如下所示：

2. 3. 
very long 
     line of text 

如何正確地執行此操作？

Answer 1

使用flex來解決這個問題，使容器div顯示爲flex。

確保你的類以字母開頭（Which characters are valid in CSS class names/selectors?）

https://jsfiddle.net/cymozzeL/1/

.t1 { 
    display: flex; 
} 

還有很多更你可以用這一點，請看看

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

如果您不想使用display: flex與olde兼容的原因[R瀏覽器，你可以讓他們在線塊，頂部垂直對齊它們，然後使用jQuery來得到他們的寬度和計算DIV4的寬度：

jQuery(document).ready(function() { 
 
var width1 = $(".x1").innerWidth(); 
 
var width2 = $(".x2").innerWidth(); 
 
var width3 = $(".x3").innerWidth(); 
 
var width4 = (width1 - width2 - width3 - 8) + "px"; 
 
$(".x4").css("width", width4); 
 
});

.x2, .x3, .x4 { 
 
display: inline-block; 
 
vertical-align: top; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="x1"> 
 
    <div class="x2"> 
 
    2. 
 
    </div> 
 
    <div class="x3"> 
 
    3. 
 
    </div> 
 
    <div class="x4"> 
 
    very long line of text very long line of text very long line of text very long line of text very long line of text very long line of text very long line of text 
 
    </div> 
 
</div>

（注：-8在計算中是通過反覆試驗來完成的 - 這是必要的，因爲HTML代碼中的換行符會產生一些空白，否則會將DIV4分解到下一行）