「width：whatever-left-in-the-line;」的CSS是什麼？

我希望能夠告訴HTML實體佔用線中所有未使用的空間。所以，我想有這樣的事情：「width：whatever-left-in-the-line;」的CSS是什麼？

 
------------------------------------------------------------------------ 
| normal text | as much as possible | some longer normal text | 
------------------------------------------------------------------------

的問題是，我不知道「正常」或「再普通」的大小，所以我不能設置像素點，或百分比。我知道如何做的最好的是：

<table border="0" cellpadding="0" cellspacing="0" with="100%"> 
<tr><td style="border: 1px solid red;">normal&nbsp;text</td> 
    <td style="border: 1px solid green; width: 100%;">as much as possible</td> 
    <td style="border: 1px solid red;">much&nbsp;longer;&nbsp;normal&nbsp;text</td> 
</tr> 
</table>

這看起來真的很爛。更何況，你需要記得使用 否則，表格會在你的單詞之間插入換行符。

在像Qt這樣的東西，我只是設置擴展屬性，或拉伸。有沒有辦法用CSS做到這一點？

編輯：最好不使用表

來源

2014-03-13 prewett

'white-space：nowrap;'是否不需要' '？ – SmokeyPHP

@SmokeyPHP：很可能。但是，我真的更喜歡沒有桌子的東西。 – prewett

沒有爲解決這一確切的問題一個鮮爲人知但令人驚訝的有效方法：

Text-align: justify;

基本上，它會迫使你的div向左和向右漂浮，並佔用儘可能多的空間，而不必使用那些有各種與其相關的其他問題的浮動塊。

這個有趣的部分是添加了僞元素。 Text-align: justify不適用於最後一行（在你的情況下，只有一行）。因此，在真實內容之後添加虛假的最後一行，這樣您的單行內容即可獲得效果。

Codepen Demo

HTML：

<div class="container"> 
    <div class="text">Any length text here</div> 
    <div class="text">My Right side text as long as i want</div> 
</div>

CSS：

.container { 
     text-align: justify; 
     line-height: 0; // so that the invisible last line doesn't take up space 
     &:after { // adds a false last line to the content so justify is applied 
     content: ''; 
     display: inline-block; 
     width: 100%; 
     } 
    } 
.text { display: inline-block; }

進一步閱讀：http://www.barrelny.com/blog/text-align-justify-and-rwd/

scss mixins to handle this

來源

2014-03-13 10:50:47 DMTintner

有趣。我希望你可以強迫'證明'始終工作，因爲我永遠不會記住那個容器CSS而不去查看它，但肯定比表格更好！ – prewett

@prewett，然而，同意文本對齊的正常用法是文本，如果這是默認的用法，它真的不可用，最後一行文本傳播出去。但是，只需將您的代碼包裝在SCSS mixin中，以便您不必記住它。這種方式也更可重用（請參閱鏈接） – DMTintner

你不得不嘗試設置你的「正常」或「再正常」通過給不同的寬度，然後中間的人會自動有一個空間來調整一切，是 - 左在這線

就像我已經添加寬度爲「正常」或「再正常」

<table border="0" cellpadding="0" cellspacing="0" width="500"> 
    <tr><td style="border: 1px solid red;width:80px;">normal text</td> 
     <td style="border: 1px solid green; ">as much as possible</td> 
     <td style="border: 1px solid red;width:160px;">much longer normal text</td> 
    </tr> 
</table>

您可以進一步與物業

工作

給最小寬度將防止給定的「TD」從打破了文成兩行

這裏有一個FIDDLE

來源

2014-03-13 10:27:17 Abhi

的任何細胞，是不是一組尺寸（相對（％）或絕對的（比方說，以像素爲單位））將自動展開以填充任何額外的空間，假設表格寬於所有單元格的總起始寬度。如果你想要一個特定的單元格作爲「填充」單元格，其他單元格需要設置寬度。

如果你不希望在所有細胞中的文字換行，@ SmokeyPHP的建議是正確的：http://dev.w3.org/csswg/css-text/#white-space

table td { 
    white-space: nowrap; 
}

來源

2014-03-13 10:32:17

「width：whatever-left-in-the-line;」的CSS是什麼？

回答

相關問題