div中的内容超过容器宽度的问题

  1. 云栖社区>
  2. 博客>
  3. 正文

div中的内容超过容器宽度的问题

木头先生 2018-04-19 10:27:00 浏览671
展开阅读全文

问题描述:

<div class="category">
    <div class="column-a">排名</div>
    <div class="column-b">参赛选手</div>
    <div class="column-c">月收益</div>
    <div class="column-d">月收益率</div>
</div>

在一个div中横向放置了4个inline-block,宽度为百分比,加起来总共是100%。当其中一个inline-block的文字内容超过元素本身的宽度时,发现其他3个inline-block位置会发生改变,但是如果这个inline-block的内容如果为数字或者一整个连续的英文字符串,其他3个inline-block的位置不会发生改变,不过如果这个inline-block的内容为英文段落(单词之间有空格)并且内容超过元素本身的宽度时,其他3个inline-block的位置还是会发生改变。

原因:浏览器在解析我们页面的时候,会把一串数字当成一个单词,这样就不会自动切断字符串而进行换行。同理,一整个连续的英文字符串(fyhbfhnfsjgydjnfxghfxghghfghfhfghfghfghfg)也不会自动切断字符串而进行换行。如果是文字或者英文段落(单词之间有空格)并且内容超过元素本身的宽度时,则会自动换行。

word-break:break-all和word-wrap:break-word的区别
1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

再扯一下word-spacing和white-space的区别,它们长得也有点像。
word-spacing是单词之间间距的,white-space是字符是否换行显示的。规定段落中的文本不进行换行可以使用white-space:nowrap;

 

网友评论

登录后评论
0/500
评论
木头先生
+ 关注