Question

我想知道如果文本超出width，有一种方法可以将文本保留在div中，直到所有文本都适合，“div”的高度被拉伸。

更新

感谢你们帮助+1，所以我应该使用'Inherit'还是'min-height'？

普通div ：

plain

然后我添加了word-wrap: break-word;，我得到了这个：

barely solved

理想：

stretched up

应增加div的{{1}}以适应整体文字

提前致谢。

height

 div {
   width: 50px;
   height: 50px;
   border: 1px solid red;
   display: inline-block;
   word-wrap: break-word;
 }

Answer 1

将CSS中的height更改为min-height：

min-height属性用于设置元素的最小高度。

这可以防止height属性的值变得小于min-height。

＆＃13;

 div {
   width: 50px;
   min-height: 50px;
   border: 1px solid red;
   display: inline-block;
   word-wrap: break-word;
 }

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>DIV</title>
</head>

<body>

  <div>asjdkljaddddsadsssssssdfsdfsdfsf</div>

</body>

</html>

＆＃13;

Answer 2

只需将width:inherit用于<div>

即可

这样，您的<div>将从其所包含的内容继承其高度

这是css类

 div {
   width: 50px;
   height: inherit;
   border: 1px solid red;
   display: inline-block;
   word-wrap: break-word;
 }

这是demo

Answer 3

尝试使用css行。你可以在这里查看https://jsfiddle.net/ogd5cruf/

div {
   width: 50px;
   height: auto;
   border: 1px solid red;
   display: inline-block;
   word-wrap: break-word;
 }

Answer 4

如果您将height: 50px更改为min-height: 50px，则div的高度会增加以适应其内容。同样，您可以使用max-height设置允许高度的限制。

＆＃13;

div {
  width: 50px;
  min-height: 50px;
  border: 1px solid red;
  display: inline-block;
  word-wrap: break-word;
}

＆＃13;

  <div>asjdkljaddddsadsssssssdfsdfsdfsf</div>

＆＃13;

Answer 5

＆＃13;

 div {
   width: 50px;
   height: 100%;
   border: 1px solid red;
   display: inline-block;
   word-wrap: break-word;
 }

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>DIV</title>
</head>

<body>

  <div>asjdkljaddddsadsssssssdfsdfsdfsf</div>

</body>

</html>

＆＃13;

Answer 6

删除固定高度

＆＃13;

 div {
   width: 50px;
   border: 1px solid red;
   display: inline-block;
   word-wrap: break-word;
 }

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>DIV</title>
</head>

<body>

  <div>asjdkljaddddsadsssssssdfsdfsdfsfqwqweqewqqweqweeqewqweeqw</div>

</body>

</html>

＆＃13;

Answer 7

如果您想最初设置div的高度，请使用：

div {
    width: 50px;
    min-height: 50px;
    border: 1px solid red;
    display: inline-block;
    word-wrap: break-word;
}

这将确保它至少高出50px，但当您在其中放入更多内容时仍会扩展。

Answer 8

我一直在与这个问题作斗争。这是一种纯CSS的方法来实现它。

我的示例允许您拥有一个响应式（可选）文本块，并具有自定义数量的显示行。

// Usually you want to have that everywhere.
* {
  word-wrap: break-word;
}
div {
  /* height / desired number of lines, must be higher than font-size */
  line-height: 16.66px;
  font-size: 14px;

  width: 50px;
  height: 50px;
  border: 1px solid red;
  overflow: hidden;
}

<div class="text">Lorem Ipsum is simply dummy text of the printing 
and typesetting industry. Lorem Ipsum has been the 
industry's standard dummy text ever since the 1500s</div>

如何在其中保留div的文本，如果更大，那么div会向下扩展？

8 个答案: