What could be causing Line Clamp to fail when using text alignment justify?

Question

What could be causing Line Clamp to fail when using text alignment justify?

How can I get proper ellipsis to show with -webkit-line-clamp when using text-align:justify? It's functioning correctly with text-align:left/right.

Does anyone have any suggestions or tricks?

div {
    text-align: justify;
    width:150px;
    padding: 0 5px;
    line-height: 18px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div>Why Line Clamp is not working with text align justify</div>

html css google-chrome

Answer 1

Answer №1

My solution involved:

/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

Answer 2

My solution involved:

/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

Answer 3

Answer №2

WebKit flexbox is not fully developed and lacks standardization! I don't consider this an error at all. Even Opera has its own method for handling clamping, which can be quite frustrating.

.last-line {
  height: 3.6em; /* precisely three lines */
  text-overflow: -o-ellipsis-lastline;
}

If you prefer pure CSS solutions like myself, instead of using clamp.js to manage your ellipsis, give this a try: CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS

Answer 4

WebKit flexbox is not fully developed and lacks standardization! I don't consider this an error at all. Even Opera has its own method for handling clamping, which can be quite frustrating.

.last-line {
  height: 3.6em; /* precisely three lines */
  text-overflow: -o-ellipsis-lastline;
}

If you prefer pure CSS solutions like myself, instead of using clamp.js to manage your ellipsis, give this a try: CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS

Answer 5

Answer №3

Take a look at this JSFiddle. I made some changes to the CSS and experimented a bit, and now it's working fine for me! :)

CSS:

.text-clamp {
    text-align: center;
    width: 200px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

HTML

<div class="text-clamp">Why isn't Line Clamp working with text aligned in the center?</div>

I hope this solution works for you too or helps you resolve your problem.

Answer 6

Take a look at this JSFiddle. I made some changes to the CSS and experimented a bit, and now it's working fine for me! :)

CSS:

.text-clamp {
    text-align: center;
    width: 200px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

HTML

<div class="text-clamp">Why isn't Line Clamp working with text aligned in the center?</div>

I hope this solution works for you too or helps you resolve your problem.

Answer 7

Answer №4

The method you are attempting to utilize is an outdated approach that relies on an obsolete version of display: flex; and is best avoided.

Instead of using the JavaScript technique clamp.js, I have developed a pure CSS alternative which can be found here: http://codepen.io/n3ptun3/pen/meYKgZ?editors=110

CSS

p {
  position: relative;
  width: 400px;
  height: 120px;
  line-height: 30px;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  text-align: justify;
}

p::after {
  content: "...";
  background-color: #fff;
  height: 30px;
  width: 20px;
  position: absolute;
  bottom: 0;
  right: 0;
}

Keep in mind that this solution works best when used with a solid background, which is typically the case for body text.

Key points to remember:

Adjust the line-height as needed for your design.
Set the height to a multiple of the line-height.
Ensure the overflow property is set to hidden.
Add the ellipsis to the after pseudo-element and match its background color to that of the paragraph.

Answer 8

The method you are attempting to utilize is an outdated approach that relies on an obsolete version of display: flex; and is best avoided.

Instead of using the JavaScript technique clamp.js, I have developed a pure CSS alternative which can be found here: http://codepen.io/n3ptun3/pen/meYKgZ?editors=110

CSS

p {
  position: relative;
  width: 400px;
  height: 120px;
  line-height: 30px;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  text-align: justify;
}

p::after {
  content: "...";
  background-color: #fff;
  height: 30px;
  width: 20px;
  position: absolute;
  bottom: 0;
  right: 0;
}

Keep in mind that this solution works best when used with a solid background, which is typically the case for body text.

Key points to remember:

Adjust the line-height as needed for your design.
Set the height to a multiple of the line-height.
Ensure the overflow property is set to hidden.
Add the ellipsis to the after pseudo-element and match its background color to that of the paragraph.

What could be causing Line Clamp to fail when using text alignment justify?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Error message: Incomplete JSX element

What is the best way to include a .AVI file in an HTML document?

Issue with Bootstrap 4.x tooltip positioning within an overflowing container

Get rid of the blue outline border when embedding Google Maps

Tips for creating a div element with a width that is close to 100%

Utilize function data to assign unique IDs in jQuery for HTML elements

The system encountered an error stating that the class 'Database' could not be found

Indicate the appropriate HTML code for bookmarking a webpage on an iPhone

Stacking background images in CSS above other contained elements in a div

Expand the size of the card box with CSS to create a larger and more prominent display

What steps should be taken to ensure that data can be transmitted from the input without allowing the user to edit the ID field?

vee-validate - Standalone form validation with distinct procedures

Can you explain the contrast between body.onunload and body.onbeforeunload?

Using SVG sprites from external sources alongside child nodes

Some of the items in the dropdown menu are not fully displayed

Avoiding overlap in CSS Grid layout with Internet Explorer 11

What is the best way to vertically center the `tab-content` without relying on the tablist for

Transform the check box into a button with a click feature

Modifying an image on a website with XML information and jQuery

The text appears choppy as the javascript is in the process of loading