Styling and positioning text in a container with CSS

The “overflow” property

The overflow property is used to define the behavior of content that is larger than the container itself. This property is not only reserved for text styling but for all types of content, although it is often used for text. The following cases are possible:

• “visible” – content is visible even across container boundaries (default behavior)
• “hidden” – excess content beyond the edges of the container is hidden
• “scroll” – content is visible within the container, both scroll bars are active and excess content is available by scrolling
• “auto” – the content is visible within the container, the browser decides which scroll bar is active and the excess content is available by scrolling

Example

See the Pen Overflow by Web programming (@chos) on CodePen.

NOTE:
When using the default property “visible” text outside the container will not push other content, but will position over it.

The “white-space” property

The “white-space” property is used to define how extra white space and extra empty lines will be displayed, as well as the behavior of the text when it reaches the border of the bounding container. The property can have the following values:

Value “normal”

When this value is assigned to the property, the text will wrap to the next line by default, when it reaches the edge of the container. Empty lines from the code and additional empty spaces, so called, will not be displayed. whiteness.

The value of “nowrap”

When this value is assigned to the property, the text will not wrap when it reaches the edge of the container, but will stay on the same line.

Value “before”

When this value is assigned to the property the text will remain the same as written in the code, all including spaces. If the text written in the code is longer than the container it will not break when it reaches the edge of the container, but will remain in the same line, and will be broken only where it is broken in the code.

The “pre-wrap” value

When this value is assigned to the property, the text will remain the same as written in the code, including spaces, but if the text written in the code is longer than the container it will wrap when it reaches the edge of the container.

The “pre-line” value

This property wraps text that is longer than the container, removes excess white space (eng. white space), but keeps empty whole lines from the code, as well as places in the code where the text is wrapped in the code.

Example

See the Pen white-space by Web programming (@chos) on CodePen.

Text-overflow property

The “text-overflow” property governs the behavior of text when it is cut off because it could not “fit” in the container. It follows from this that this property is only applied when the overflow: hidden;

property is active.

It should be noted that this property only applies to single-line text, so it is necessary to prevent single-line text from wrapping. In order for this CSS property to be active, it is necessary to use the white-space: nowrap;

property as well.

The “text-overflow” property can have the following values: clip or ellipsis. The “clip” value is the default “regular” behavior when the text is clipped exactly at the edge of the container. The “text-overflow” property is only interesting when it has the value “ellipsis” because then three dots appear at the end where the text is cut.

See the Pen Text ellipsis by Web programming (@chos) on CodePen.

Showing a shortened version of multi-line text

Since the property “text-overflow” is only valid for one line of text, we will not be able to do the job with it, unfortunately there is no property that could perform the given task and is supported in all browsers. There are solutions for this problem as well, but they are different for each browser, so it is necessary to use all solutions at once to cover all browsers.

a) -webkit-line-clamp

The -webkit-line-clamp feature is only supported by Chrome and Safari. The value of this property defines the number of rows to be displayed. It must be used with two additional properties: display: -webkit-box; and -webkit-box-orient: vertical;.

b) Fade Out Way

For this mechanism we need to know the exact height of one row. The mechanism is based on partially covering the last line with a pseudo-element, which has a defined gradient with a transparent color.

Example

See the Pen Truncation of multi-line text by Web Programming (@chos) on CodePen.

Application code:

See the Pen Multiline Text Shortcuts (for all browsers together) by Web programming (@chos) on CodePen.

“overflow-wrap” & “word-break”

By default, the text breaks only in certain spaces (when there is a space or dash), but sometimes it is necessary to break even when there is no space or dash. The “overflow-wrap” and “word-break” properties are minimally different and can break text when a word too large cannot fit in the container. The most common application of the property is for breaking long urls. It should be noted that the “overflow-wrap” property has an alias property named “word-wrap”.

See the Pen Word-wrap by Web programming (@chos) on CodePen.

The difference between “overflow-wrap” and “word-break” is:

The main difference is that when “overflow-wrap” encounters a long word, it first tries to solve the problem by moving the whole word to the next line, and only if it fails to solve the problem then it “breaks”.

See the Pen JravQX by Web programming (@chos) on CodePen.

The “hyphens” property

The “hyphens” property can break a word wherever we want. When the property value hyphens: manual; is defined, then the word wraps wherever we put the keyword: ­. It also adds “retraction” at the defined fracture site.

See the Pen Hypthen by Web programming (@chos) on CodePen.

The “text-align” property

This property is used to position the content of the block element. Possible values of this property are:

• left – Default value positions content along the left edge.
• right – Positions the content of the block along the right edge.
• center – Centers content.
• justify – Expands and spreads content from edge to edge.
• inherit – Inherits from the parent element positioning.