获得所需的最小宽度/换行行为答案

【问题标题】：Getting desired min-width/line-wrapping behavior获得所需的最小宽度/换行行为
【发布时间】：2016-10-13 20:43:45
【问题描述】：

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

宽度始终至少为 400 像素；
单词不会跨行换行，但可以在单词边界处换行；
文本永远不会溢出 div 的边框，即宽度会拉伸以容纳诸如非常长的单词之类的内容；
只要有可能，宽度正好是 400 像素。特别是，如果有长段短字，宽度应该正好是400px。

我得到的最接近的方法是使用display: inline-block; min-width: 400px;，但带有短字的长段落仍然会拉伸宽度。

【问题讨论】：

对文本额外使用此规则 - word-wrap: break-word;
word-wrap: break-word; 不满足要点 2。

标签： html css width word-wrap

【解决方案1】：

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

这应该满足您声明的所有要求：

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

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

【讨论】：

这似乎可以按我的意愿工作。不需要word-wrap 属性，因为normal 无论如何都是默认的。

【解决方案2】：

改用 inline-table：

.mydiv{
    display:inline-table;
    width:400px;
    border:1px solid red;
    word-wrap:normal;
    word-break:keep-all;
}

【讨论】：

【解决方案3】：

我建议你试试下面的 CSS：

#container {
    width:400px;
}


@media screen and (min-width:401px) {

    #container {
        width:auto;
    }
}


@media screen and (max-width:399px) {

    #container {
        width:auto;
    }
}

应使用 id 为“容器”的 div 来封装页面的所有部分。此宽度已设置为 400 像素。现在，当用户放大或缩小时，宽度应该会自动调整到用户的窗口。将您拥有的段落的 ID 放在 @media 部分中，它们也应该自动调整。

例如： @media screen and (min-width:401px) {

#container {
    width:auto;
}


}


@media screen and (max-width:399px) {

#container {
    width:auto;
}

#paragraph {
    width:auto; 
}
}

【讨论】：