Sentence-Wrap (property word-wrap)

Question

I need to keep a sentence not wrapping when the width of the div is smaller than this sentence

.ex1 {
  background-color: #F0F0F0;
  width: 25%;
  word-wrap: normal;
}

<div class="ex1">
This is my sentence
</div>

The probleme is that properties overflow-x:visible or word-wrap: normal not working when the sentence contains spaces

You say _not wrapping_ - what do you mean? Should the text disappear where the width is not enough? Should the `div` expand to fit the text? — Martin, Jun 04 '19 at 11:33
I mean my sentence not returning in other line whene the width of div not enough. — Lagrida Yassine, Jun 04 '19 at 11:36

score 2 · Accepted Answer · answered Jun 04 '19 at 11:35

2

Use white-space to control how white spaces are handled:

.ex1 {
  background-color: #F0F0F0;
  width: 25%;
  white-space: nowrap;
}

<div class="ex1">
  This is my sentence
</div>
<div class="ex1">
  Line breaks are suppressed here
</div>

answered Jun 04 '19 at 11:35

Maxime Launois

928
6
19

Add this line into style: **div{ white-space: nowrap; }** – Pritesh Jun 04 '19 at 11:38
Thanks, white-space work – Lagrida Yassine Jun 04 '19 at 11:39

score 2 · Answer 2 · answered Jun 04 '19 at 11:37

I'm not entirely certain what you mean by not wrapping.

Either, the text could disappear at the end of the div:

.ex1 {
  background-color: #F0F0F0;
  width: 25%;
  overflow-x: hidden;
  white-space: nowrap;
}

<div class="ex1">
This is my sentence
</div>

This is achieved by setting the white-space to nowrap, forcing the text to not wrap, and then hiding any overflow on the x-axis (overflow-x: hidden).

Or alternatively, the div could expand to fit the text:

.ex1 {
  background-color: #F0F0F0;
  width: 25%;
  white-space: nowrap;
}

<div class="ex1">
This is my sentence
</div>

As above, using no-wrap, but allowing overflow by not hiding it.

Sentence-Wrap (property word-wrap)

2 Answers2