Html text to long

Use CSS «text-overflow» to truncate long texts

When using Rails to truncate strings, you may end up with strings that are still too long for their container or are not as long as they could be. You can get a prettier result using stylesheets.

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

• We build reliable cloud solutions with Infrastructure as code
• We are experts in security, Linux and databases
• We support your dev team to perform

The CSS property text-overflow: ellipsis has been around for quite a long time now but since Firefox did not support it for ages, you did not use it. Since Firefox 7 you can! Show archive.org snapshot

Note that this only works for single-line texts. If you want to truncate tests across multiple lines, use a JavaScript solution like Superclamp Show archive.org snapshot . There is also -webkit-line-clamp which works only on Chrome.

Example

Consider this HTML and Sass for a box that is not wide enough for its content:
^

^
#greetings
width: 100px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis // This is where the magic happens

While incompatible browsers (IE 5.5, Firefox up until 6) will just cut off the text when it reaches its container’s borders, in most browsers you will see something like:

When you are doing this for a mobile application, also use -o-text-overflow to target Opera Mobile and Opera Mini which still use the prefixed version.

Источник

Wrapping and breaking text

This guide explains the various ways in which overflowing text can be managed in CSS.

What is overflowing text?

In CSS, if you have an unbreakable string such as a very long word, by default it will overflow any container that is too small for it in the inline direction. We can see this happening in the example below: the long word is extending past the boundary of the box it is contained in.

CSS will display overflow in this way, because doing something else could cause data loss. In CSS data loss means that some of your content vanishes. So the initial value of overflow is visible , and we can see the overflowing text. It is generally better to be able to see overflow, even if it is messy. If things were to disappear or be cropped as would happen if overflow was set to hidden you might not spot it when previewing your site. Messy overflow is at least easy to spot, and in the worst case, your visitor will be able to see and read the content even if it looks a bit strange.

In this next example, you can see what happens if overflow is set to hidden .

Finding the min-content size

To find the minimum size of the box that will contain its contents with no overflows, set the width or inline-size property of the box to min-content .

Using min-content is therefore one possibility for overflowing boxes. If it is possible to allow the box to grow to be the minimum size required for the content, but no bigger, using this keyword will give you that size.

Breaking long words

If the box needs to be a fixed size, or you are keen to ensure that long words can’t overflow, then the overflow-wrap property can help. This property will break a word once it is too long to fit on a line by itself.

Note: The overflow-wrap property acts in the same way as the non-standard property word-wrap . The word-wrap property is now treated by browsers as an alias of the standard property.

An alternative property to try is word-break . This property will break the word at the point it overflows. It will cause a break-even if placing the word onto a new line would allow it to display without breaking.

In this next example, you can compare the difference between the two properties on the same string of text.

This might be useful if you want to prevent a large gap from appearing if there is just enough space for the string. Or, where there is another element that you would not want the break to happen immediately after.

In the example below there is a checkbox and label. Let’s say, you want the label to break should it be too long for the box. However, you don’t want it to break directly after the checkbox.

Adding hyphens

To add hyphens when words are broken, use the CSS hyphens property. Using a value of auto , the browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. To have some control over the process, use a value of manual , then insert a hard or soft break character into the string. A hard break ( ‐ ) will always break, even if it is not necessary to do so. A soft break ( ­ ) only breaks if breaking is needed.

You can also use the hyphenate-character property to use the string of your choice instead of the hyphen character at the end of the line (before the hyphenation line break).

This property also takes the value auto , which will select the correct value to mark a mid-word line break according to the typographic conventions of the current content language.

The element

In the below example the text breaks in the location of the .

See also

• The HTML element
• The CSS word-break property
• The CSS overflow-wrap property
• The CSS white-space property
• The CSS hyphens property
• Overflow and Data Loss in CSS

Found a content problem with this page?

This page was last modified on May 25, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

How to handle long text overflow with pure CSS (truncate/ellipsis, wrap)

When working on a website or a web app texts are often overlooked, that’s when issues like overflowing text occur. To solve that, you can use some solutions like truncating or ellipsizing a text (add three dots) or wrapping the text.

Overflowing text content quite often happens in the following cases:

• For long words;
• For long URL’s;
• On mobile devices;
• For narrow container elements;
• For table cells;
• For button elements.

Depending on the CSS styles you have, the text overflow will usually look either like a horizontal scroll or like a cut-off content.

Consider the following issue. There’s a fixed-width container on a page with a link containing and pointing to a long URL. The link text will overflow the container and will look messy, as well as it can produce an unwanted horizontal scroll on smaller screen sizes.

1. Wrapping text

1.2 The word-break property

One way to handle long text in CSS is to wrap it to the next line. This approach is handy when you don’t have to worry about text spanning multiline. When using word-break property you have two options how to wrap it:

• break-all — this will break text once the characters don’t fit inside the container
• break-word — this will break text once the characters don’t fit inside the container but it will preserve the word sequence. NOTE: this is a deprecated API and it is not recommended to use.

.container a  word-break: break-all; > 

Browser support for word-break property: https://caniuse.com/word-break

1.2 The overflow-wrap property

Another option to wrap text is to use the overflow-wrap property. This property also has two options for wrapping:

• anywhere — will break text at any given point if it doesn’t fit;
• break-word — same as anywhere except it will break long words at arbitrary points.

.container a  overflow-wrap: break-word; > 

Browser support for overflow-wrap property: https://caniuse.com/wordwrap

2. Truncating text

2.1 The text-overflow property

The text-overflow property will add an ellipsis (will add three dots) to a text if it doesn’t fit inside the container. This approach is handy if you want to keep text in a single line. However, with some additional modifications, it can be made for multiline text as well.

The text-overflow property with a value of ellipsis must be set on a parent element, relative to the text. Two additional properties must be specified overflow and white-space .

NOTE: Learn how to handle text overflow for select tag.

Single line

.container  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; > 

Multiline

For the multiline solution the white-space property must be removed, this way the text will be truncated on the last available line.

.container  overflow: hidden; text-overflow: ellipsis; > 

Browser support for text-overflow property: https://caniuse.com/text-overflow

2.2 The line-clamp property

A more modern approach is the line-clamp property which will limit the container text to a specified number of lines. As well as add the three dots at the end. This property will only work with a -webkit- vendor prefix and a display property set to -webkit-box or -webkit-inline-box .

Unline the text-overflow solution, this approach is straightforward and more understandable, when it comes to truncating multiline text. The line-clamp property must be set to the element that is overflowing and the value should be equal to the number of lines to span.

.container a  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; > 

Browser support for the line-clamp property: https://caniuse.com/css-line-clamp

A full demo is available on CodePen:

Источник

Multiple ways to truncate text content in Angular?

Sometimes, Long content string text needs to be truncated with limited characters and displayed in the Angular application.

There are multiple ways we can do

• Angular slice pipe to truncate string content
• Adding an ellipse and truncating a string.

Angular truncates a string to limit characters

This example does limit the number of characters to display on UI.

Typescript component: Declared a variable content that holds long content:

import  Component, OnInit > from "@angular/core"; import  DecimalPipe > from "@angular/common"; @Component( selector: "app-component", templateUrl: "./app.component.html", styleUrls: ["./app.component.scss"], >) export class AppComponent implements OnInit  constructor() <> content: string = "long form of text display"; ngOnInit(): void <> >

Angular provides an inbuilt slice pipe 🔗

It creates a subpart of an array of strings.

It takes the start and end parameters.

expression is a variable or angular javascript expression. the start is an index starting position. the end is an end index starting position. for a string to truncate to 10 characters.

Here is an Angular HTML component.

p>Angular truncate text examplep> div><>div>

If you want to add an ellipse or some string after truncating the string content.

Here is a component example

p>Angular truncate text & add some string examplep> div>10)? (content | slice:0:10)+'>>>':(content) >>div>

Angular CSS component to limit the long text and add ellipse end

We can also limit the long text using CSS in the Angular component

div class="text"> This is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long text.span> div>

.text  display: -webkit-box; max-width: 300px; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; >

Источник