溢出属性不考虑填充

Question

如下面的屏幕截图所示，溢出正在起作用，但是它一直到容器的末尾，看起来很糟糕。

有没有办法可以在某个点将其切断并使其尊重填充？这样文本才能在填充位置而不是容器边缘的地方结束？

我对此div的专门代码如下：

/*Blog Card Styling*/

#blogCardContainer {
  display: grid;
  grid-template-columns: 1fr 2fr;
  margin-left: 10%;
}

.blogCard {
  background-color: white;
  margin-bottom: 2em;
  grid-column: 2;
  width: 75%;
  text-align: center;
  border: 1px solid black;
  padding: 1em;
  align-self: start;
  padding: 20px;
  min-height: 10em;
  max-height: 10em;
  overflow: hidden;
}

.trendingTab {
  background-color: white;
  float: right;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 80%;
  align-self: start;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
}


/*Blog Card Stylnig End*/

<div id='blogPostSectionContainer'>

  <div class='blogCard'>

    <h1>First Post</h1>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempo. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempo. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempo. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempo. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		</span></p>

  </div>
</div>

Answer 1

不，您不能让溢出以这种方式尊重填充。为了达到这种效果，您应该使用一些边框和框阴影的变体。

最简单的解决方案是使边框透明，并且要使用填充的宽度，然后使用类似box-shadow的值：0 0 0 1px黑色；模仿屏幕截图中的1px边框。

总体而言，您似乎试图以博客卡的“摘录”样式截断文本。

结合上面的原始HTML，您开始使用的CSS，上面的border和box-shadow解决方案，这是一种更完整的方法，它还为内容溢出添加了垂直省略号：

17

console.log(021)    // octal
console.log(019)    // not octal

if( 021 < 019 ) console.log('Paradox');

卡片混搭在scss中，因此如果您想进一步修改它，使其更适合您的设计，则可以参考我所做的the codepen。摘录和卡片的高度基于您为变量$ lineCount设置的许多行，而不是使用CSS中原来的10em高度。

Answer 2

试图删除一些行，这就是我得到的：

/* No stylings on the container just .blogPost */
.blogCard {
    display: block;
    background: white;
    width: 75%;
    text-align: center;
    border: 1px solid black;
    padding: 20px;
    margin: auto;
    overflow: scroll;
}

由于我不知道您具体想要什么，所以不知道它是否有帮助