當文字環繞兩行時，塊元素佔滿全寬

我基本上只是好奇這個，因爲我一直看到它，沒有人說過我似乎知道是否有解決方案。當文字環繞兩行時，塊元素佔滿全寬

通常當我遇到它時，它是一個看起來很花哨的按鈕，它帶有背景，並且是顯示塊或內聯塊。

問題是這樣的：假設你有一個按鈕，裏面有一個特定的寬度，可以說160px，並且你有一個顯示塊或內嵌塊，如果內部文本都適合一行它按照你所期望的那樣包裝到了兩個，但是現在它已經在兩行上，它不再需要佔據整個div的寬度，但是它確實需要！我真的不覺得奇怪，但是我想知道是否有人知道一個CSS或甚至JS解決方案可以解決這個問題？

代碼：

<div style="width: 160px; padding: 10px; background: blue;"> 
    <a href="#" style="background: red; display: block;">Test with a longwrappingword</a> 
</div>

JSFiddle here

來源

2013-06-20 FreddyBushBoy

獎金指向任何人只要CSS就可以做到！ – FreddyBushBoy

這是什麼意思？我添加了一個寬度屬性來錨定。

<div style="width: 160px; padding: 10px; background: blue;"> 
    <a href="#" style="background: red; display: block; width: 100px;">Test with a longwrappingword</a> 
</div>

來源

2013-06-20 18:06:02 nocturns2

這確實有效，但我希望它是動態的，因此它可以處理任意長度的文本。 – FreddyBushBoy

這是你的意思嗎？

http://jsfiddle.net/UPxZm/

<div style="width: 160px; padding: 10px; background: blue;"> 
    <a id="block" href="#" style="background: red; display: block;">Test with a longwrappingword</a> 
</div> 

<script> 
var $block = $('#block'); 
var orig = $block.html(); 
var index = orig.lastIndexOf(' ') || -1; 
var longword = orig.substring(index + 1, orig.length); 

$block.html(orig + longword); 
var wanted_width = $block[0].scrollWidth/2; 
$block.html(orig); 
$block.width(wanted_width); 
</script>

來源

2013-06-21 03:03:04 Pere

不錯的一個佩爾，這是訣竅！ – FreddyBushBoy

遠非理想，必須採用較笨拙的方式來做到這一點，但沒有JavaScript我不這麼認爲 – Pere

是否this爲你工作？

<div style="width: 160px; padding: 10px; background: blue;"> 
    <a href="#" style="background: red; display: table; width: 1%">Test with a longwrappingword</a> 
</div> 
<span style="padding-left:130px">^ Where the element COULD end if it wanted to</span>

來源

2013-06-21 13:41:14

雖然它還不完美，但它會導致文本在不需要時分成兩行奇怪的。就好像周圍的div更寬或者沒有定義寬度。 [實施例]（http://jsfiddle.net/Sb6es/5/） – FreddyBushBoy

當文字環繞兩行時，塊元素佔滿全寬

回答

相關問題