Question

如何获取包含<div>变量文本的行为如下：

宽度始终至少为400px;
单词不会在行间断开，但行可以在单词边界处断开;
文本永远不会溢出div的边框，即宽度会延伸以容纳非常长的单词等内容;
宽度恰好是400px。特别是，如果有一个带有短字的长段，宽度应该恰好是400px。

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

Answer 1

尝试使用内联表：

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

Answer 2

你说你希望你的div表现得像桌子/桌子一样。

这应符合您的所有要求：

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

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

Answer 3

如果您不希望文字扩展您的DIV宽度，则必须使用max-width。

Answer 4

我建议您尝试以下CSS：

#container {
    width:400px;
}


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

    #container {
        width:auto;
    }
}


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

    #container {
        width:auto;
    }
}

带有id＆＃39;容器＆＃39;的div应该用于封装页面的所有部分。此宽度已设置为400px。现在，当用户放大或缩小时，宽度应自动调整到其用户的窗口。将你所拥有的段落的id放在@media部分，它们也应该自动调整。

例如为： @media screen和（min-width：401px）{

#container {
    width:auto;
}


}


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

#container {
    width:auto;
}

#paragraph {
    width:auto; 
}
}

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

4 个答案: