在按钮中简单地包装文本，但宽度最小化，没有不必要的空白

Question

我有一个按钮，它有一个max-width，里面的文本可以换行。如果里面的文本是换行的，则按钮宽度与max-width匹配，并在右侧留下空白。

如何让按钮最小化其宽度?

.button {
  max-width: 120px;
  border: 1px solid black;
  display: inline-block;
  word-wrap: break-word;
}

这里是一个简单的例子html(也是jsfiddle)

<div class="button">Account Navigation</div>

这个按钮最终看起来像这样(原谅粗糙的ascii表示的边界):

|----------------|
|Account         |
|Navigation      |
|----------------|

但是我希望它是这样的:

|----------|
|Account   |
|Navigation|
|----------|

但是如果你给的文本需要更多的空间，因为较长的单词，那么它应该使按钮更宽，并打破任何单词，如果他们太长，像这样:

|----------------|
|Supercalifragili|
|sticexpialidocio|
|us              |
|----------------|

这对我来说似乎是很基本的，但我却找不到这个确切的问题。

编辑:该按钮实际上是帐户导航按钮，它恰好以这种方式包装，但按钮内的实际文本将是用户的姓和名。所以按钮内的文本是动态的，它可能都适合一行-或者它可能需要在2或3行中换行。

最好显示整个文本，而不是用省略号将其截断。我想要一个只有css的解决方案，但如果Javascript是我唯一的选择，它不会是世界末日-因为我已经做了一些逻辑来减少字体的大小，如果按钮变得太高。

Answer 1

好了，这里有两点需要注意:

1. 要使单词在超长时中断，只需添加属性word-break: break-word;。

2. 容器不会减小它的大小，因为当一个文本节点在另一个文本节点下面时，容器在技术上仍然是相同的大小，只是它的一个文本节点移动得更低。要控制这如何影响您的按钮，您有两个选项:

   。将max-width的值修改为小于120px，这个值足以容纳你为按钮编写的大部分可能的文本。

   b。添加一些padding-left到按钮，以弥补其正确的大小

您可以在这里检查我为此创建的小提琴(使用填充解决方案):https://jsfiddle.net/Ahm7777/aL4L8m5q/5/.

好吧，我真的想不出任何CSS解决方案，因为这是所有属性定义交互的预期行为，但更简单的方法是使用span包装按钮上的单词，检索其宽度并将其应用于按钮。这就是我所讲的样本小提琴。你只需要在按钮加载文本