关于怎么让div宽度自适应文字内容?

因为文字多少不能固定,如果div固定宽度的话,内容又很少,这样会很难看,但是如果div不固定宽度,内容又很多的话,这样文字会把div宽度撑的很大,所以该怎么做?
如图所示,我把头像和用户昵称+文字内容放到两个div里面,然后两者用inline-block排列起来,所以中间那个文字内容怎么解决让文字自适应呢?

图片描述

图片描述

阅读 73.3k
5 个回答

设置一个最大宽度和最小宽度就好了

直接用css3的fit-content:

width:fit-content;
width:-webkit-fit-content;
width:-moz-fit-content;

直接设置display:inline-block;行元素是自适应文本长度的

max-width 可以讓你限制住他最大的寬度,但是這樣不夠,還得設定其自動斷行 word-wrap: break-word

max-width: 300px;
min-width: 100px;
word-wrap: break-word;

這樣就會在沒有內容時也有 100px 的寬度,而有內容但過長時,最大寬度限制在 300px 並斷行

使用display:table

推荐问题
宣传栏