获得所需的 min-width/line-wrapping 行为

Question

我应该怎么做才能得到一个 <div> 包含如下行为的变量文本：

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

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

Answer 1

我建议您尝试以下 CSS:

#container {
    width:400px;
}


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

    #container {
        width:auto;
    }
}


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

    #container {
        width:auto;
    }
}

ID 为 'container' 的 div 应该用于封装页面的所有部分。此宽度已设置为 400px。现在，当用户放大或缩小时，宽度应自动调整为用户 window。将您在@media 部分中的段落的 id，它们也应该自动调整。

例如： @media 屏幕和（最小宽度：401px）{

#container {
    width:auto;
}


}


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

#container {
    width:auto;
}

#paragraph {
    width:auto; 
}
}

Answer 2

试试内联-table：

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

Answer 3

你是说你希望你的 div 表现得像一个 table / table-cell。

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

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

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

获得所需的 min-width/line-wrapping 行为

Getting desired min-width/line-wrapping behavior

html

css

width

word-wrap