Word wrap css in span

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 Wrap a Long String Without any Whitespace Character

You can wrap a long string, which does not have any whitespace character by using the CSS word-wrap property, or overflow-wrap, if you use CSS3.

In this snippet, you’ll find some examples for block elements, as well as for the inline ones.

Solutions with the CSS word-wrap property

In the example below, we set the word-wrap property to its «break-word» value for the element and specify its width. Also, we set the display property to “inline-block”.

Example of wrapping a long string without a whitespace character for inline elements:

html> html> head> title>Title of the document title> style> span < width: 135px; word-wrap: break-word; display: inline-block; > style> head> body> span> LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum span> body> html>

Result

Example of wrapping a long string without a whitespace character for block elements:

html> html> head> title>Title of the document title> style> textarea < width: 100px; word-wrap: break-word; > style> head> body> textarea> LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremI textarea> body> html>

Here too, we specified the word-wrap and width properties, but for the element.

Solution with the CSS overflow-wrap property

In CSS3, the word-wrap property is renamed to overflow-warp. So, consider this when choosing the solution.

Example of wrapping a long string without a whitespace character with the CSS overflow-wrap property:

html> html> head> title>Title of the document title> style> span < display:inline-block; width: 150px; overflow-wrap: break-word; > style> head> body> span> LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum span> body> html>

Источник

How to Wrap Words in a Tag with CSS

There are many CSS properties that can be used to control the wrapping and breakpoints and determine how spaces and line breaks must be processed before wrapping.

If you’ve faced the situation when you need to wrap words in a , you can use the white-space property with the «pre-wrap» value to preserve whitespace by the browser and wrap the text when necessary and on line breaks. Also, you’ll need the word-wrap property.

In this snippet, see how to use the properties mentioned above to wrap words in a with a cross-browser method.

Create HTML

html> html> head> title>Title of the document title> head> body> h1>Example h1> div> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. div> body> html>

Add CSS

• Set the white-space property to «pre-wrap». Also, add the -moz- and -o- prefixes.
• Use the word-wrap property with the «break-word» value.

div < white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; >

The result of our code looks like the following.

Example of wrapping words in a element:

html> html> head> title>Title of the document title> style> div < white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; color: lightgreen; > style> head> body> h1>Example h1> div> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. div> body> html>

Result

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero’s De Finibus Bonorum et Malorum for use in a type specimen book.

Let’s see another example, where we use the CSS overflow-wrap property, which applies to inline elements. It determines whether the browser must add line breaks within an otherwise unbreakable string for preventing the text from overflowing its line box.

In the example below, we wrap not only the word within a element but also the word, which is placed in a within the element.

Example of wrapping words in a element with the CSS word-wrap property:

html> html> head> title>Title of the document title> style> div < width: 100px; border: 1px solid green; padding: 10px; word-wrap: break-word; > span < overflow-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; > style> head> body> h1>Example h1> div> This is a span>loooooooooooooooooooooooooong span> text for example. Here can be a long word, tooooooooooooooo. div> body> html>

Источник