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

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

更新：

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

简单的div ：

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

理想：

应该增加div的height以适应整个文本

提前致谢。

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

       
asjdkljaddddsadsssssssdfsdfsdfsf
   

Answer 1

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

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

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

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

       
asjdkljaddddsadsssssssdfsdfsdfsf
   

Answer 2

只需使用width:inherit您的

这样，您的

将从它所包含的内容inheritance其高度

这是css类

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

这是演示

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设置允许高度的限制。

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

  
asjdkljaddddsadsssssssdfsdfsdfsf 

Answer 5

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

       
asjdkljaddddsadsssssssdfsdfsdfsf
   

Answer 6

删除固定高度

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

       
asjdkljaddddsadsssssssdfsdfsdfsfqwqweqewqqweqweeqewqweeqw
   

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; } 

 
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