填充区域显示的隐藏内容溢出，可以隐藏吗？

Question

<style>
   div{padding:5px;overflow:hidden;height:20px}
</style>
<div class="container">
  something something   something something   something something   something something   something something   something something   something something 
<div>

小提琴：https://jsfiddle.net/v21vgzfc/

在CSS中是否可以使文本也隐藏在填充区域中而不添加另一层？

Answer 1

是的，我会使用边框而不是填充。像这样：

div{
border:solid 5px #00f;
overflow:hidden;
height:20px
}

Answer 2

我想请给div一个宽度

 <style>
   div{padding:5px;overflow:hidden;height:40px; width:250px; background:#009}
</style>

Answer 3

您可以通过使用边框而不是填充来解决此问题。

div {
   border: 5px solid blue;
   overflow: hidden;
   background-color: blue;
   height: 40px
}

看看它是如何在 this Fiddle 中工作的。

Answer 4

U 应该在父元素内创建一个嵌套元素，并将

overflow: hidden

应用于该嵌套元素。

<div class="parent">
  <div class="child">
    <!-- Content here -->
  </div>
</div>

.parent {
    padding: 20px;
    overflow: hidden;
}

.child {
   overflow: hidden;
}