Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Truncating text inside a div [duplicate]

I have some dynamic text (comes from a database) and I need to fit into a div

My div has a fixed size. However, when the text becomes too long, it breaks into two lines. I would like to put three dots at the end of longer texts to make them fit inside a single line.

For example: My really long text becomes My really lo...

I have committed several attempts, but basically all of them depend on counting characters. That is, whatsoever, not really fortunate, for characters do not have a fixed width. For example, a capital W is much wider than an small i

Therefore, I encounter two main problems with the character-counting approach:

  1. If the text has many narrow characters, it gets cut and appended with ..., even if the text would actually fit on one line afore trimmed.

  2. When the text contains many wide characters, it ends up on two lines even after I cut it to the maximum number of characters and append the dots.

Is there any solution here (JavaScript or CSS) that takes the actual width of the text into consideration, and not the number of characters?

like image 898
Øyvind Bråthen Avatar asked Mar 14 '13 09:03

Øyvind Bråthen


People also ask

How do you truncate text in CSS?

Solution # 1: Truncate text for single line This solution works for single-line truncation. Force text to be on a single line: white-space: nowrap; Now, our text should be on the same line and should overflow from the box if it's long enough and wrapped before.

Can I use text-overflow ellipsis?

The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (' … '), or display a custom string.

How do you truncate text in CSS?

The text can also be truncated using the CSS ::after pseudo-element. In the next example, the overflow of the <span> is hidden, and the max-height is set based on the line-height . Example of truncating a multi-line text using the ::after pseudo-element: ¶

How do you put padding around truncated text?

If there is a need for spacing around the truncated text, padding must be applied to the parent element. The text can also be truncated using the CSS ::after pseudo-element. In the next example, the overflow of the <span> is hidden, and the max-height is set based on the line-height.

How to hide text beyond the Div border using CSS?

Here, the area of DIV element is shown by the red border, and we can clearly see that text is going beyond it. We can solve this problem by using CSS overflow property. hidden – The overflow is clipped, and the rest of the content will be invisible. <!-- Adding css -->

How to solve the problem of text going beyond Div?

This problem basically occurs when the height and width of DIV element are small such that all the text can not be fitted in that DIv. Here, the area of DIV element is shown by the red border, and we can clearly see that text is going beyond it. We can solve this problem by using CSS overflow property.


2 Answers

Use these styles:

white-space: nowrap;      /*keep text on one line */
overflow: hidden;         /*prevent text from being shown outside the border */
text-overflow: ellipsis;  /*cut off text with an ellipsis*/
like image 75
James Coyle Avatar answered Oct 13 '22 05:10

James Coyle


Apart from ellipsis, I would suggest display the whole text on mouse hover using tooltip.

fiddle

like image 20
Shouvik Avatar answered Oct 13 '22 04:10

Shouvik