Search code examples
htmlcssoverflow

Trying to Overflow with padding at the bottom

In following code you may see the first span with class "noticia" and it has 4 lines. When it happens, my padding, kind not works... I would like that the fourth line stays hidden to keep a padding between "span.noticias"

Code: https://codesandbox.io/s/inspiring-germain-om864i?file=/index.html

Thanks for help!!

Solution

  • First, we get the height of the span element which We apply display:inline-block in .noticias class, and a tag is applied to line-clamp CSS so you can get this your output.

    To overcome this problem just add these styles to your link please check CSS style: https://codesandbox.io/embed/still-tree-c2lcpt?fontsize=14&hidenavigation=1&theme=dark

    .noticia {
  padding: 10px 5px;
  border-bottom: solid 1px;
  height: 50px;
  overflow: hidden;
  font-size: 1.2em;
  font-family: monospace;
  text-align: justify;
  display: inline-block;
}

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