Numbers do not automatically shift to a new line when reaching the fixed width limit

Question

Numbers do not automatically shift to a new line when reaching the fixed width limit

I have two <div>. In one of them, I have added 'Lorem ipsum' text, while the other contains numbers. I noticed that the div with numbers does not wrap the numbers to a new line within a fixed width <div>. Can anyone explain why numbers do not wrap to a new line? Is this situation described somewhere in the specifications?

JSFiddle.

div {
  width: 200px;
}

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quasi consequatur nobis magni molestias repudiandae rerum quisquam quo dolore dolorem! Sit eligendi accusamus aliquam consectetur inventore minima, fugiat qui quia.</div>
<div>111111111111111111111111111111111111111111111111</div>

html css

Answer 1

Answer №1

When dealing with numerals in a browser, they are treated as regular text and will not break unless specifically instructed to do so using the word-wrap or word-break property. You can add a rule like:

div {
  width: 200px;
  word-wrap: break-word;
}

to achieve this.

Check out this jsFiddle example for reference

Answer 2

When dealing with numerals in a browser, they are treated as regular text and will not break unless specifically instructed to do so using the word-wrap or word-break property. You can add a rule like:

div {
  width: 200px;
  word-wrap: break-word;
}

to achieve this.

Check out this jsFiddle example for reference

Answer 3

Answer №2

div {
  width: 200px;
  word-wrap: break-word;
}

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quasi consequatur nobis magni molestias repudiandae rerum quisquam quo dolore dolorem! Sit eligendi accusamus aliquam consectetur inventore minima, fugiat qui quia.</div>
<div>111111111111111111111111111111111111111111111111</div>

Answer 4

div {
  width: 200px;
  word-wrap: break-word;
}

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quasi consequatur nobis magni molestias repudiandae rerum quisquam quo dolore dolorem! Sit eligendi accusamus aliquam consectetur inventore minima, fugiat qui quia.</div>
<div>111111111111111111111111111111111111111111111111</div>

Numbers do not automatically shift to a new line when reaching the fixed width limit

Answer №1

Answer №2

Similar questions

The search results in ajax live search are present, but unfortunately they are not displaying on

What is the best way to apply a checked input status only when hovering using CSS?

Triggering a system context menu through a longpress gesture on the MobileFirst iOS app is a

Centering Text and Image in React Horizontally

Displaying a DIV on initial website load using localStorage

Remove the formatting on the entered text

When using position:sticky, the overflow:auto behavior may not function as intended

A technique for horizontally centering an image while simultaneously ensuring that the bottom is pushed down, even at an unknown resolution, and maintaining center alignment if

What is the maximum size allowed for a background image in CSS?

Attempting to imitate the hover effect of a scroll-down button

Creating a Custom Progress Bar with Bootstrap

Unusual shift in behavior - <input> on Windows 8.1

Issue with mouseout gap in Microsoft Edge when using the <select> element

Utilizing the onclick event for a div element

Is a single f.select impacting another f.select in the same form? (undesired)

Trouble with CSS Class Showing Up Only When Hovered

The enigmatic appearance of CSS border-image using a transparent image creates a visible edge when viewed

Trouble with CSS positioning

Automatically adjust column sizes using Bootstrap's responsive width feature

Aligning image vertically