当文本换行到两行时，块元素采用全宽

Posted 2023-03-06

【中文标题】当文本换行到两行时，块元素采用全宽

【英文标题】：Block elements take full width when text wraps on to two lines

【发布时间】：2013-06-17 15:34:11

【问题描述】：

我基本上只是对此感到好奇，因为我经常看到它，而且我与之交谈过的人似乎都不知道是否有解决方案。

通常当我遇到这个时，它是一个看起来很漂亮的 <a> 按钮，上面有背景，是显示块或内联块。

问题是这样的：假设您在一个具有特定宽度的 div 中有一个按钮，比如说 160px，并且您有一个显示块或内联块 <a>，如果 @987654325 内的文本@ 不能全部放在一行上，它会像您期望的那样换成两行，但现在它在两行上，它不再需要占据 div 的整个宽度，但它确实如此！

我对发生这种情况并不感到惊讶，但我想知道是否有人知道可以解决此问题的 CSS 甚至 javascript 解决方案？

代码：

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

JSFiddle here

【参考方案1】：

这是你的意思吗？我为锚点添加了宽度属性。

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

【讨论】：

这确实有效，但我希望它是动态的，因此它适用于任何长度的文本。

【参考方案2】：

这是你的意思吗？

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>

【讨论】：

远非理想，必须有不那么笨拙的方法，但没有 javascript 我不这么认为

【参考方案3】：

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>

【讨论】：

虽然它仍然不完美，但它会导致文本在不需要时分成两行奇怪。就像周围的 div 更宽或没有定义宽度一样。 Example