disabling text alignment as justified for specific sections of text

Question

disabling text alignment as justified for specific sections of text

To avoid wrapping a specific part of text, you can use

<span style="white-space: nowrap;">

.

If you have justified text (text-align: justify), and want to prevent justification for certain words without affecting the rest, is there a way to do it?

For example, instead of having equal spacing between words like this:

Lorem ipsum dolor sit amet, consectetur |
adipiscing    elit.     Phasellus    et |
ullamcorperenim sed velit fermentum.    |

You want to keep "adipiscing elit" together only like this:

Lorem ipsum dolor sit amet, consectetur |
adipiscing elit.      Phasellus      et |
ullamcorperenim sed velit fermentum.    |

Is there a way to achieve this formatting?

css mobile-safari

Answer 1

Answer №1

Here are some different options to consider:

Try using FOUR-PER-EM SPACE U+2005 instead of a normal space, for example adipiscing elit. Browsers may not always recognize it as non-stretchable space, but many do treat it this way. This method is considered natural and falls under the category of fixed-width spaces. However, note that it may not work in older versions of Internet Explorer if the text's primary font is not Arial Unicode MS or similar.
Wrap the words within inline markup (often span) and apply text-justify: none and display: inline-block to it. Keep in mind that this technique might not be supported by certain older browsers and will force the two words together unless the latter declaration is applied (and without it, modern browsers may not recognize this approach).
Consider using NO-BREAK SPACE instead of a regular space. While this method used to be effective, it now tends to combine the words on the same line. Some current browsers like Firefox unfortunately interpret no-break spaces as stretchable.
Explore techniques similar to Web_Designer’s updated answer. It is recommended to use em values for width to correspond with the font size, with 0.25em being the typical width of a space character.

Answer 2

Here are some different options to consider:

Try using FOUR-PER-EM SPACE U+2005 instead of a normal space, for example adipiscing elit. Browsers may not always recognize it as non-stretchable space, but many do treat it this way. This method is considered natural and falls under the category of fixed-width spaces. However, note that it may not work in older versions of Internet Explorer if the text's primary font is not Arial Unicode MS or similar.
Wrap the words within inline markup (often span) and apply text-justify: none and display: inline-block to it. Keep in mind that this technique might not be supported by certain older browsers and will force the two words together unless the latter declaration is applied (and without it, modern browsers may not recognize this approach).
Consider using NO-BREAK SPACE instead of a regular space. While this method used to be effective, it now tends to combine the words on the same line. Some current browsers like Firefox unfortunately interpret no-break spaces as stretchable.
Explore techniques similar to Web_Designer’s updated answer. It is recommended to use em values for width to correspond with the font size, with 0.25em being the typical width of a space character.

Answer 3

Answer №2

I personally advise against using the html style attribute. It's much easier to make changes if you use a class instead:

Enclose the words "adipiscing elit." in a span with a class like this:

<span class="unjustify">adipiscing elit.</span>

Then, in your CSS:

.unjustify {
    word-spacing: 2px; //try different values here.
}

Update:

After testing, the solution above doesn't appear to work.
...so I have devised the following (functional) solution:

Enclose the space between your two words in a span with a class like this:

adipiscing<span class="unjustify"> </span>elit.

And then in your CSS:

.unjustify {
    display: inline-block;
    width: 6px;
}

Answer 4

I personally advise against using the html style attribute. It's much easier to make changes if you use a class instead:

Enclose the words "adipiscing elit." in a span with a class like this:

<span class="unjustify">adipiscing elit.</span>

Then, in your CSS:

.unjustify {
    word-spacing: 2px; //try different values here.
}

Update:

After testing, the solution above doesn't appear to work.
...so I have devised the following (functional) solution:

Enclose the space between your two words in a span with a class like this:

adipiscing<span class="unjustify"> </span>elit.

And then in your CSS:

.unjustify {
    display: inline-block;
    width: 6px;
}

Answer 5

Answer №3

If you're looking for a solution, consider using one of the fixed-width Unicode space characters available. Check out:

or

http://en.wikipedia.org/wiki/Space_(punctuation)

For instance:

adipiscing&#x2004;elit.

Just like Web_Designer's solution, keep in mind that these spaces will leave a space at the end of the line if there is a line break.

Answer 6

If you're looking for a solution, consider using one of the fixed-width Unicode space characters available. Check out:

or

http://en.wikipedia.org/wiki/Space_(punctuation)

For instance:

adipiscing&#x2004;elit.

Just like Web_Designer's solution, keep in mind that these spaces will leave a space at the end of the line if there is a line break.

disabling text alignment as justified for specific sections of text

Answer №1

Answer №2

Update:

Answer №3

Similar questions

What is the best way to align the navbar-brand to the right using Bootstrap 4?

Choose various div elements and modify their background colors

Using JQuery to swap out background images in CSS

Triggering a click event on various instances of a similar element type using the onclick function

tips on adjusting margins or paddings in option select

A method for changing the background of a textbox based on a specific condition

Tips for generating an ordered list that begins with 01

List-group item in Bootstrap 4 featuring an arrow on the right side

Tips for inserting HTML code within session statements

React not displaying images with relative paths

Is there a way to eliminate the gap under the image?

Place a material-ui React component at the center of a footer section

The best way to centralize the input group in bootstrap

What is the best way to toggle the visibility of my menu using JavaScript?

The server mistakenly sent the resource as a Stylesheet even though it was interpreted differently

What is the best way to align the right column section below the left column section on a reduced screen size in a responsive design?

Customizing individual characters within HTML text using the mouse's current location

Tips for making a circle and a bar overlap using CSS

The asp.net masterpage is not utilizing the stylesheet

Alignment of Multiple Backgrounds in CSS3 on a Vertical Axis