因为文字多少不能固定,如果div固定宽度的话,内容又很少,这样会很难看,但是如果div不固定宽度,内容又很多的话,这样文字会把div宽度撑的很大,所以该怎么做?
如图所示,我把头像和用户昵称+文字内容放到两个div里面,然后两者用inline-block排列起来,所以中间那个文字内容怎么解决让文字自适应呢?
因为文字多少不能固定,如果div固定宽度的话,内容又很少,这样会很难看,但是如果div不固定宽度,内容又很多的话,这样文字会把div宽度撑的很大,所以该怎么做?
如图所示,我把头像和用户昵称+文字内容放到两个div里面,然后两者用inline-block排列起来,所以中间那个文字内容怎么解决让文字自适应呢?
直接用css3的fit-content:
width:fit-content;
width:-webkit-fit-content;
width:-moz-fit-content;
max-width
可以讓你限制住他最大的寬度,但是這樣不夠,還得設定其自動斷行 word-wrap: break-word
max-width: 300px;
min-width: 100px;
word-wrap: break-word;
這樣就會在沒有內容時也有 100px
的寬度,而有內容但過長時,最大寬度限制在 300px
並斷行
5 回答1.3k 阅读✓ 已解决
3 回答2.4k 阅读✓ 已解决
3 回答1.4k 阅读✓ 已解决
3 回答2.1k 阅读✓ 已解决
4 回答2k 阅读
2 回答1.4k 阅读✓ 已解决
4 回答2.7k 阅读
设置一个最大宽度和最小宽度就好了