关于怎么让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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏