A detailed explanation of the problems in the combination of CSS ellipsis and padding

Time:2020-3-31

Text truncation implemented by CSS

Consider the following code to realize the style code of text exceeding automatic truncation:


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

Test with the following HTML fragment:


<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, 16 February 2017. Sometimes simple algorithms are just wrong. In
  this case shuffling an .... In other words as the array is scanned the element
  under
</div>

Operation effect:

Through CSSellipsisImplementation of text truncation

The problem of padding

Everything is perfect until you addpaddingAfter style.

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

The effect is as follows:

paddingText truncation broken

becausepaddingIt occupies the internal space of the element, but this part of the area is inside the element, so it will not be affected byoverflow: hiddenInfluence.

Terms of settlement

line-height

When setline-heightWhen appropriate, or large enough, thepaddingTo achieve the goal of extruding the extra part out of the visible range.


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

adoptline-heightrepair

This method is not suitable for all scenarios, because not all places need that large row height.

Replace padding

paddingIt’s nothing more than to add a space between the content of an element and its border, or to another element. Here we can consider how to replace it.

such asmargin。 But if the element has a background, as in this case, thenmarginBecause of the elementmarginPart of it is without background.

Still availableborderInstead.


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

Useborderreplacepadding

Not surprisingly, it still has its limitations. It is in the element itself that it has its ownborderWhen it comes to style requirements, there will be conflicts.

Separate margins from content containers

The general method may be to separate content and margin into two elements, one for margin and one for text truncation. This is easy to understand. Look at the code directly:


<div className="my-div">
  <div className="truncate-text-4">
    How Not To Shuffle - The Knuth Fisher-Yates Algorithm. Written by Mike
    James. Thursday, 16 February 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>

And our style can stay the same.

Separate margins from content containers

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 whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.

Recommended Today

Configure Apache to support PHP in the Apache main configuration file httpd.conf Include custom profile in

In Apache’s main configuration file / conf/ http.conf Add at the bottom Include “D:workspace_phpapache-php.conf” The file path can be any In D: workspace_ Create under PHP file apache- php.conf file Its specific content is [html] view plain copy PHP-Module setup LoadFile “D:/xampp/php/php5ts.dll” LoadModule php5_module “D:/xampp/php/php5apache2_2.dll” <FilesMatch “.php$”> SetHandler application/x-httpd-php </FilesMatch> <FilesMatch “.phps$”> SetHandler application/x-httpd-php-source </FilesMatch> […]