Question 42767 in Html Question posted in
Some basic documentation can be found here.

Trying to Overflow with padding at the bottom – Html

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!!

Tags:

2

Answers


  1. 0

    The height of your link (‘a’ tag) is more than its parent (noticia), if you solve this problem and just fix it in its parent you will achieve your goal. To overcome this problem just add these styles to your link:

    a{
  height: 100%;
  display: block;
  word-wrap: break-word;
}
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search