Allowing CSS to break long words but not spaces for better readability

Question

Allowing CSS to break long words but not spaces for better readability

Imagine you have the following paragraph:

thisisaverylongwordthatneverbreaks

Applying word-wrap:break-word; results in:

thisisaverylongwordthat
neverbreaks

This works well, but what if I try:

this is avery long word that has spaces

The output becomes:

this
is
avery
long
word
that
has
spaces

My inquiry is how to achieve this layout:

this is avery long word that
neverbreaks

I want words to wrap at spaces but force breaks on long words. How can I accomplish this?

css line-breaks

Answer 1

Answer №1

If you need the text to break at any point, use word-break: break-all;

Take a look at this demonstration where I set the background color to black for better visibility: JS Fiddle Example

Here's the HTML code:

<div>iama verylongwordthathasaspace yehey</div>

And here's the CSS code to achieve the desired effect:

div {
    width: 120px;
    word-break: break-all;
    background: black;
    color: white;  
}

You can find more information about the word-break property on CSS-Tricks: Word-break

Answer 2

If you need the text to break at any point, use word-break: break-all;

Take a look at this demonstration where I set the background color to black for better visibility: JS Fiddle Example

Here's the HTML code:

<div>iama verylongwordthathasaspace yehey</div>

And here's the CSS code to achieve the desired effect:

div {
    width: 120px;
    word-break: break-all;
    background: black;
    color: white;  
}

You can find more information about the word-break property on CSS-Tricks: Word-break

Answer 3

Answer №2

When using the CSS property "word-break: break-all;" for languages like English or Latin, text will break at any character. This can result in very short words breaking awkwardly depending on available space. To see the difference between break-all and break-word, try resizing the container in the demo below...

Please note that these solutions are purely CSS-based. For more complex manipulations with words and characters, JavaScript would be required.

[draggable=true] {
  cursor: move;
}

.resizable {
  background: #e3e8ee;
  overflow: auto;
  resize: both;
  max-width: 360px;
  max-height: 360px;
  min-width: 140px;
  min-height: 360px;
  padding: .5em;
}

.resizable div {
  background: #fff;
  font: 1em/1.1em Arial, Helvetica, Sans-serif;
  margin-bottom: .5em;
  padding: .25em;
}

.resizable div h2 {
  font-size: 1em;
  font-weight: bold;
  margin: .1em 0;
}

.break-all span {
  word-break: break-all;
}

.break-word span {
  word-break: normal;
  word-wrap: break-word;
}

.hyphen span {
  hyphens: auto;
}

.truncate span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div draggable="true" class="resizable">
  <div class="break-all" lang="en">
    <h2>Break-all</h2>
    <span>iama verylongwordthathasaspace yehey</span>
  </div>
  <div class="break-word" lang="en">
    <h2>Break-word</h2>
    <span>iama verylongwordthathasaspace yehey</span>
  </div>
  <div class="break-word hyphen" lang="en">
    <h2>Bk-wd Hyphens</h2>
    <span>iama verylongwordthathasaspace yehey</span>
  </div>
  <div class="break-word hyphen truncate" lang="en">
    <h2>Bk-wd Truncate</h2>
    <span>iama verylongwordthathasaspace yehey</span>
  </div>
</div>

Answer 4

When using the CSS property "word-break: break-all;" for languages like English or Latin, text will break at any character. This can result in very short words breaking awkwardly depending on available space. To see the difference between break-all and break-word, try resizing the container in the demo below...

Please note that these solutions are purely CSS-based. For more complex manipulations with words and characters, JavaScript would be required.

[draggable=true] {
  cursor: move;
}

.resizable {
  background: #e3e8ee;
  overflow: auto;
  resize: both;
  max-width: 360px;
  max-height: 360px;
  min-width: 140px;
  min-height: 360px;
  padding: .5em;
}

.resizable div {
  background: #fff;
  font: 1em/1.1em Arial, Helvetica, Sans-serif;
  margin-bottom: .5em;
  padding: .25em;
}

.resizable div h2 {
  font-size: 1em;
  font-weight: bold;
  margin: .1em 0;
}

.break-all span {
  word-break: break-all;
}

.break-word span {
  word-break: normal;
  word-wrap: break-word;
}

.hyphen span {
  hyphens: auto;
}

.truncate span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div draggable="true" class="resizable">
  <div class="break-all" lang="en">
    <h2>Break-all</h2>
    <span>iama verylongwordthathasaspace yehey</span>
  </div>
  <div class="break-word" lang="en">
    <h2>Break-word</h2>
    <span>iama verylongwordthathasaspace yehey</span>
  </div>
  <div class="break-word hyphen" lang="en">
    <h2>Bk-wd Hyphens</h2>
    <span>iama verylongwordthathasaspace yehey</span>
  </div>
  <div class="break-word hyphen truncate" lang="en">
    <h2>Bk-wd Truncate</h2>
    <span>iama verylongwordthathasaspace yehey</span>
  </div>
</div>

Answer 5

Answer №3

managing long words wrapping with spaces intact

To ensure your text behaves as desired, you can utilize a combination of CSS properties:

word-break: break-all; This CSS property allows long words to break within the container width instead of overflowing it.
white-space: pre-wrap; By using this property, white spaces are preserved and text wraps accordingly while respecting line breaks.

Below is the code for your specific situation:

HTML

<div class="paragraph-container">
  iama verylongwordthathasaspace yehey
</div>

CSS:

.paragraph-container {
  white-space: pre-wrap;
  word-break: break-all;
}

The Result will be:

iama verylongwordthathas

nospace yehey

We hope this information proves helpful.

Answer 6

managing long words wrapping with spaces intact

To ensure your text behaves as desired, you can utilize a combination of CSS properties:

word-break: break-all; This CSS property allows long words to break within the container width instead of overflowing it.
white-space: pre-wrap; By using this property, white spaces are preserved and text wraps accordingly while respecting line breaks.

Below is the code for your specific situation:

HTML

<div class="paragraph-container">
  iama verylongwordthathasaspace yehey
</div>

CSS:

.paragraph-container {
  white-space: pre-wrap;
  word-break: break-all;
}

The Result will be:

iama verylongwordthathas

nospace yehey

We hope this information proves helpful.

Answer 7

Answer №4

.custom-css {
  word-wrap: break-word; /* Breaking long words */
  overflow-wrap: break-word; /* For older browsers */
  max-width: custom-value; /* Set container width */
}

<div class="custom-css">
  Thisisaverylongwordwithnospaces hooray
</div>

Answer 8

.custom-css {
  word-wrap: break-word; /* Breaking long words */
  overflow-wrap: break-word; /* For older browsers */
  max-width: custom-value; /* Set container width */
}

<div class="custom-css">
  Thisisaverylongwordwithnospaces hooray
</div>

Allowing CSS to break long words but not spaces for better readability

Answer №1

Answer №2

Answer №3

managing long words wrapping with spaces intact

Below is the code for your specific situation:

Answer №4

Similar questions

Why do style assignments lose their motion when executed right after being made?

Troubleshooting AngularJS Directives' Cross-Origin Problems within Eclipse

Troubleshooting a Custom Menu Control in HTML

Learn how to dynamically switch the background image of a webpage using a button in AngularJS

What is the best way to create a border with an inside radius?

Can CSS stylesheets be set up to automatically load based on the browser being used to access the website?

Concealing specific sections of HTML content in a webview on the fly

What steps should I take in modifying my existing code to use jQuery to set my div to a minimum height rather than a fixed height?

Is it possible to have a hidden div box within a WordPress post that is only visible to the author of the

Is there a way to automatically determine the text direction based on the language in the input text?

Ensure that buttons are cropped when extending beyond the border of another DIV

Placing a crimson asterisk beside the input field within Bootstrap

Swap a jQuery class with another if the class for ul li is currently active

Deactivate interactive functions on the mat-slider while preserving the CSS styling

How can I make the burger icon responsive and centered in my navbar?

What exactly is the CSS element grouping operator?

Unable to adjust the width of a table column within a horizontally scrollable container

When utilizing *NgIf, the button will be shown without the accompanying text being displayed

Flex: 1 does not completely fill the Angular layout div in vertical dimensions

Switch image upon hover within a sprite