Question

我在<div>中有几个按钮。当<div>的长度超过100％时，如何压缩按钮;我是说避开第二行？

类似于scaleX，但取决于所有可用按钮的宽度。

示例代码：

<div class="something">
  <button>some text</button>
  <button>some other text</button>
  <button>another example</button>
</div>

示例： http://jsfiddle.net/BRNKt/ 我想制作更密集的按钮（文本字体）以保持所有按钮在行中;但是要适合原来的div宽度。

Answer 1

.something,
.something button {
    white-space: nowrap;
}

Answer 2

您可以通过添加button { padding: 0 }使渲染更紧凑。您可以通过添加.something { word-spacing: -0.3em }; button { word-spacing: 0 }来进行更多调整。

但我不知道你怎么能让字体大小取决于可用的宽度，这似乎意味着什么。（并且它很容易导致严重的可访问问题。此外，许多浏览器不会让你减少字体大小低于某些浏览器依赖限制。）

如果您可以在按钮内接受换行符，即在两行中有一个按钮文本，您可以按照文本换行的方式将按钮“强制”为可接受的宽度，而不是溢出：

button { padding: 0; max-width: 14%; float: left; }

但是，在这种情况下，最好在按钮中插入强制换行符，例如

<button>some<br>text</button> <button>some<br>other<br>text</button>

如何在一条线上挤压按钮？

2 个答案: