CODEWITHSUNDEEP
htmlcss
user15573857
user15573857

Reputation:

why is line-clamp not working with padding?

I'm trying to line-clamp 3 lines, but for some reason when I add padding it doesn't seem to work and moves to 4 lines like this:

.title{
  padding:1rem;
  width:10%;
  background-color:red;
  word-break: break-all;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: hidden;
}
<div class='title'>
  Testing Testing Testing Testing Testing Testing Testing
</div>

How do I fix it?

Edit:

My apologies, I forgot to mention I require border at the bottom like this:

.title{
  padding:1rem;
  width:10%;
  background-color:red;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: hidden;
}

.title:nth-of-type(1){
  border-bottom:solid 1px black;
}
<div class='title'>
  Testing Testing Testing Testing Testing Testing Testing
</div>

<div class='title'>
  Testing Testing Testing Testing Testing Testing Testing
</div>

I'm hoping that I won't have to wrap it around another div

Upvotes: 9

Views: 7078

Answers (4)

ykadaru
ykadaru

Reputation: 1144

In my case, I found that white-space: break-spaces; helped. When I have some time I need to read https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace and https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp more carefully.

Here's the full set of styles applied to a container (any element), with text content, to make line clamping possible:

-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: break-spaces; /* added this */
padding-right: 50px; /* just to demonstrate, but my container had some arbitrary right padding, which caused some content to just be clipped without applying the ellipsis line clamping. This usually happened to content that could fit in one line, padding included. */

One more thing if it helps people stumbling into this - this article on CSS tricks outlines all the various ways to achieve clamping apart from this! https://css-tricks.com/line-clampin/ Some of them may circumvent this issue, I'm unsure, but worth trying depending on your use-case.

Upvotes: 0

Salwa Manosur
Salwa Manosur

Reputation: 19

Using margin instead of padding done the job for me .

Upvotes: -1

S.Visser
S.Visser

Reputation: 4725

line-clamp is just clamping the text after set lines. But it is not removing text from the dom.

For example, line-clamp: 3 results in the following:

Hello World
This is
An Exammple...
For this Post

This is why we add an overflow: hidden; to hide it.

But an padding will make your box bigger, so the overflow is only happing after your padding.

A solution can be to wrap your title in an wrapper div and set the padding there.

Snippet contains an example without the overflow, for visualiziation

.title{
  padding:1rem;
  width:10%;
  background-color:red;
  word-break: break-all;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
<div class='title'>
  Testing Testing Testing Testing Testing Testing Testing
</div>

Upvotes: 8

Temani Afif
Temani Afif

Reputation: 272591

add a transparent border instead

.title{
  border:1rem solid #0000;
  box-shadow:0 1px 0 #000; /* your border */
  margin-bottom:1px;
  width:10%;
  background-color:red;
  word-break: break-all;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: hidden;
}
<div class='title'>
  Testing Testing Testing Testing Testing Testing Testing
</div>

Upvotes: 5

Related Questions