Detailed explanation of the problem when combining CSS ellipsis and padding

Text truncation with CSS

Consider the following code to implement the style code for automatic truncation of text:

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

Use the following HTML snippet for testing:

<style>
  .my-div {
    width: 300px;
    margin: 10px auto;
    background: #ddd;
  }
</style>
<div class="my-div truncate-text-4">
  How Not To Shuffle - The Knuth Fisher-Yates Algorithm. Written by Mike James.
  Thursday, February 16, 2017. Sometimes simple algorithms are just wrong.
  this case shuffling an .... In other words as the array is scanned the element
  under
</div>

Operation effect:

Text truncation effect achieved through CSS ellipsis

The padding problem

Everything works perfectly until I add padding to the text container.

  .my-div {
    width: 300px;
    margin: 10px auto;
    background: #ddd;
+ padding: 30px;
  }
Current effect

The effect now is this:

padding breaks text truncation

Because padding occupies the internal space of the element, but this part of the area is inside the element, it will not be affected by overflow: hidden .

Solution

line-height

When line-height is set appropriately or large enough, the padding can be offset to achieve the goal of squeezing the excess part out of the visible range.

.my-div {
  width: 300px;
  margin: 10px auto;
  background: #ddd;
  padding: 30px;
+ line-height: 75px;
} 

Fix it with line-height

This method is not suitable for all scenarios, because not all places require such a large line height.

Replace padding

padding is nothing more than adding space between the content of an element and its border, or between it and other elements. Here you can consider the actual method to replace it.

For example, margin . But if the element has a background, such as in this example, the margin test does not apply because margin part of the element has no background.

You can also use border instead.

.my-div {
  width: 300px;
  margin: 10px auto;
  background: #ddd;
- padding: 30px;
+ border: 30px solid transparent;
} 

Use border instead of padding

Not surprisingly, it still has its limitations. That is, when the element itself has its own border style requirements, there will be a conflict.

Separate margins from content container

This may be a more universal method, which is to separate the content and margin into two elements, one element is used specifically to implement the margin, and the other element is used to implement text truncation. This is easy to understand, just look at the code:

<div className="my-div">
  <div className="truncate-text-4">
    How Not To Shuffle - The Knuth Fisher-Yates Algorithm. Written by Mike
    James. Thursday, February 16, 2017. Sometimes simple algorithms are just
    wrong. In this case shuffling an .... In other words as the array is scanned
    the element under
  </div>
</div>

Our styles can remain the same.

Separate margins from content container

Related resources

overflow:hidden ignoring bottom padding

How can I force overflow: hidden to not use up my padding-right space

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.