text - 当文本换行到两行时， block 元素占据全宽

Question

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

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

问题是这样的:假设您在 div 中有一个具有特定宽度的按钮，例如 160px ，并且您有一个显示块或内联块 <a>里面，如果里面的文字<a>不能全部放在一条线上，它会像您期望的那样包裹到两条线上，但现在它位于两条线上，它不再真正需要占据 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

Answer 1

是否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>