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

Picture in the form of a radio button

When the only source is available, the image undergoes a transformation

The footer navigation in CSS shifts position when it is hovered over

Develop a versatile currency symbol mixin that can be used in various small text formats

Highlighting table column when input is selected

How to disable scrolling for React components with CSS styling

Customize Link Appearance Depending on Current Section

Avoiding additional empty lines between selectors when setting up Stylelint

Adaptable design tailored for smartphones

The style of the button label does not persist when onChange occurs

By default, the first table row is displayed when using table grouping in AngularJS

What is the proper way to define a class attribute for an HTML element within a PHP file?

What is the best method for selecting or isolating the code for a single animation created using JavaScript?

Design interactive elements such as buttons and input fields inspired by the layout of Google websites

Resetting CSS animations using animation-delay

Launch the jQuery Fancybox on a separate webpage

Adjusting font size to perfectly fit within its confines

Can you provide the keycodes for the numpad keys: "/" and "." specifically for the libraries I am utilizing or any other library that does not overlook them?

Obtain and utilize the background color to easily implement the same color in another window

Can CSS be used to communicate to JavaScript which media queries are currently in effect?