CSS:是否正确的div的文本内容溢出到填充?

前端之家收集整理的这篇文章主要介绍了CSS:是否正确的div的文本内容溢出到填充?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我预计div内的填充将保持清除任何文本。但是给出以下html / css,内容文本会溢出到填充中;
  1. <div class="foo">helloworld</div>
  2.  
  3. .foo {
  4. float: left;
  5. overflow: hidden;
  6. background: red;
  7. padding-right: 10px;
  8. width: 50px;
  9. border: 1px solid green;
  10. }

该文本的大小为50px,并以10px的宽度填充。是设计吗如果是这样,似乎很笨 – 如果填充内容,填充不是填充!还是我只是做错了?

问候,CSS新手。

解决方法

这是正确的行为。 overflow:hidden将剪辑外部扩展的内容。填充在盒子里面,所以如果需要,内容将会愉快地溢出到这个空间。

(source)

为了获得你似乎正在瞄准的效果,一个解决方案是将div.foo包装在另一个div中,然后设置背景,如下所示:

  1. <div class="foowrapper">
  2. <div class="foo">purrrrrrrrr</div>
  3. </div>
  4.  
  5. .foo {
  6. overflow: hidden;
  7. width: 40px;
  8. }
  9. .foowrapper {
  10. padding-right: 10px
  11. background: red;
  12. border: 1px solid green;
  13. }

猜你在找的CSS相关文章