html - 获得所需的最小宽度/换行行为

Question

我应该怎么做才能获得 <div>包含行为如下的可变文本:

• 宽度始终至少为 400 像素；
• 单词不能跨行断行，但可以在单词边界处断行；
• 文本永远不会溢出 div 的边界，即宽度会拉伸(stretch)以容纳非常长的单词等内容；
• 尽可能将宽度精确到 400 像素。特别是，如果有一个长段短字，宽度应该正好是 400px。

我得到的最接近的是使用 display: inline-block; min-width: 400px;但是用短词的长段落仍然拉长了宽度。

Answer 1

你是说你希望你的 div 表现得像一个表格/表格单元格。

这应该满足您规定的所有要求:

.box {
  width: 400px;
  display: inline-table; /* table|inline-table|table-cell */
  word-wrap: normal;
}

演示:https://jsfiddle.net/cqo9yupw/