“溢出:隐藏”让文本通过<article>

Question

当我尝试使用overflow: hidden;时，结果并不是我所期望的。这篇文章在大屏幕上有很好的大小，但在小屏幕上，文本太大了，所以它就结束了。

​

.article {
  padding: 35px;
  width: 100%;
  max-height: 200px;
  border-radius: 10px;
  box-shadow: 0 0 0.50rem black;
}

.article_img {
  float: left;
  height: 200px;
  width: 200px;
  padding-right: 25px;
  object-fit: contain;
}

<section>
  <article class="article">
    <img class="article_img" src="https://cdn.easycash.fr/img/prod/0/0/3/9/4/1/9/8/1/src/6556940-sony-ps3-slim-noir-320-go-sans-manette.jpg">
    <h1>Test</h1>
    <p style="overflow: hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia laoreet leo eget congue. Vestibulum vulputate sed risus vel accumsan. Vivamus sed rhoncus libero. Sed placerat dolor id velit pharetra, vitae vehicula augue convallis. In nec euismod
      felis. Nunc eget ornare ligula. Praesent finibus ipsum at imperdiet imperdiet. Aenean at pulvinar ligula, nec rhoncus metus. Vivamus luctus lobortis enim, quis facilisis diam pulvinar ut. Integer ultricies pellentesque leo, sed bibendum justo sollicitudin
      vitae. Sed dictum ipsum et bibendum porta. Nam vulputate tempus dui vel volutpat. Donec massa diam, fringilla eu neque sed, mattis tincidunt tortor. Nulla neque purus, dictum non porttitor vitae, fermentum rhoncus lorem. Donec eleifend ultricies
      justo, pretium interdum magna tempus vel. Suspendisse ultrices, tortor at placerat commodo, ligula diam feugiat felis, eget consectetur nibh est et dolor.</p>
  </article>
</section>

​

结果：

​

预期(约)：

​

Answer 1

到目前为止，您可以使用专有的-webkit-line-clamp并定义想要的行数：

​

html { box-sizing: border-box; }
*, *::before, *::after, *::marker { box-sizing: inherit; }

.line-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article {
  padding: 35px;
  width: 100%;
  max-height: 200px;
  border-radius: 10px;
  box-shadow: 0 0 0.50rem black;
}

.article_img {
  float: left;
  height: 200px;
  width: 200px;
  padding-right: 25px;
  object-fit: contain;
}

<section>
  <article class="article">
    <img class="article_img" src="https://cdn.easycash.fr/img/prod/0/0/3/9/4/1/9/8/1/src/6556940-sony-ps3-slim-noir-320-go-sans-manette.jpg">
    <h1>Test</h1>
    <p class="line-clamp-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia laoreet leo eget congue. Vestibulum vulputate sed risus vel accumsan. Vivamus sed rhoncus libero. Sed placerat dolor id velit pharetra, vitae vehicula augue convallis. In nec euismod
      felis. Nunc eget ornare ligula. Praesent finibus ipsum at imperdiet imperdiet. Aenean at pulvinar ligula, nec rhoncus metus. Vivamus luctus lobortis enim, quis facilisis diam pulvinar ut. Integer ultricies pellentesque leo, sed bibendum justo sollicitudin
      vitae. Sed dictum ipsum et bibendum porta. Nam vulputate tempus dui vel volutpat. Donec massa diam, fringilla eu neque sed, mattis tincidunt tortor. Nulla neque purus, dictum non porttitor vitae, fermentum rhoncus lorem. Donec eleifend ultricies
      justo, pretium interdum magna tempus vel. Suspendisse ultrices, tortor at placerat commodo, ligula diam feugiat felis, eget consectetur nibh est et dolor.</p>
  </article>
</section>

​

该属性正在被标准化为line-clamp，但尚未实现。

更多信息：

• https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
• https://caniuse.com/css-line-clamp

Answer 2

可以使用display: flex使列与row一样对齐。如果您想避免溢出，我们可以删除max-height

​

.article {
  padding: 35px;
  width: 100%;

  border-radius: 10px;
  box-shadow: 0 0 0.50rem black;
}

img {
  height: 200px;
  width: 200px;
  padding-right: 25px;
  object-fit: contain;
}

.container {
  display: flex;
  flex-direction: row;
}

.one {
  flex-basis: 10%;
  background-color: aqua;
}

.two {
  flex: 1;
  background-color: aquamarine;
}

<section>
    <article class="article">
      <div class="container">
        <div class="one">
          <img class="article_img"
            src="https://cdn.easycash.fr/img/prod/0/0/3/9/4/1/9/8/1/src/6556940-sony-ps3-slim-noir-320-go-sans-manette.jpg">
        </div>
        <div class="two">
          <h1>Test</h1>
          <p style="overflow: hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia laoreet
            leo
            eget congue. Vestibulum vulputate sed risus vel accumsan. Vivamus sed rhoncus libero. Sed placerat dolor id
            velit pharetra, vitae vehicula augue convallis. In nec euismod felis. Nunc eget ornare ligula. Praesent
            finibus
            ipsum at imperdiet imperdiet. Aenean at pulvinar ligula, nec rhoncus metus. Vivamus luctus lobortis enim,
            quis
            facilisis diam pulvinar ut. Integer ultricies pellentesque leo, sed bibendum justo sollicitudin vitae. Sed
            dictum ipsum et bibendum porta. Nam vulputate tempus dui vel volutpat. Donec massa diam, fringilla eu neque
            sed,
            mattis tincidunt tortor. Nulla neque purus, dictum non porttitor vitae, fermentum rhoncus lorem. Donec
            eleifend
            ultricies justo, pretium interdum magna tempus vel. Suspendisse ultrices, tortor at placerat commodo, ligula
            diam feugiat felis, eget consectetur nibh est et dolor.</p>
        </div>
      </div>
    </article>
    </div>
  </section>

​

更新：

如果你想有一个固定的高度，那么就必须使用overflow-y: scroll。否则，将溢出article元素的内容：

​

.article {
  width: 100%;
  padding: 35px;
  max-height: 200px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 0 0.50rem black;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.container {
  display: flex;
  height: 100%;
}

.one {
  flex: 0 0 20%;
  white-space: nowrap;

}

.two {
  flex: 0 0 80%;
  overflow-y: hidden;
  white-space: normal;
  height: 100%;
}


.article_img {
  max-width: 100%;
  max-height: 100%;
  padding-right: 25px;
  height: auto;
  object-fit: contain;
}

.ellipsis {
  display: -webkit-box;
  overflow : hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

<section>
    <article class="article">
      <div class="container">
        <div class="one">
          <img class="article_img"              src="https://cdn.easycash.fr/img/prod/0/0/3/9/4/1/9/8/1/src/6556940-sony-ps3-slim-noir-320-go-sans-manette.jpg">
        </div>
        <div class="two">
          <h1>Test</h1>
          <div class="ellipsis">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia laoreet
            leo
            eget congue. Vestibulum vulputate sed risus vel accumsan. Vivamus sed rhoncus libero. Sed placerat dolor id
            velit pharetra, vitae vehicula augue convallis. In nec euismod felis. Nunc eget ornare ligula. Praesent
            finibus
            ipsum at imperdiet imperdiet. Aenean at pulvinar ligula, nec rhoncus metus. Vivamus luctus lobortis enim,
            quis
            facilisis diam pulvinar ut. Integer ultricies pellentesque leo, sed bibendum justo sollicitudin vitae. Sed
            dictum ipsum et bibendum porta. Nam vulputate tempus dui vel volutpat. Donec massa diam, fringilla eu neque
            sed,
            mattis tincidunt tortor. Nulla neque purus, dictum non porttitor vitae, fermentum rhoncus lorem. Donec
            eleifend
            ultricies justo, pretium interdum magna tempus vel. Suspendisse ultrices, tortor at placerat commodo, ligula
            diam feugiat felis, eget consectetur nibh est et dolor.
           </div>
        </div>        
      </div>
    </article>
  </section>

​