I have a fixed width div on my page that contains text. When I enter a long string of letters it overflows. I don't want to hide overflow I want to display the overflow on a new line, see below:
dfssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssfddddddddddddddddddddddsdffffffffffffffffsdffffffffffffffffdfssssssssssssdf
Is there anyway to disable overflow and put the overflowing text on a new line??? Twitter does something like this but I can't figure it out with CSS it's possible they are using Javascript.
Can anybody help with this??
asked Aug 27, 2010 at 19:11
0
Just add
white-space: initial;
to the text, a line text will come automatically in the next line.
Jan
2,0502 gold badges28 silver badges34 bronze badges
answered Sep 28, 2015 at 7:37
Pankaj VermaPankaj Verma
3,2191 gold badge9 silver badges2 bronze badges
6
Try the tag - not as elegant as the
word-wrap
property that others suggested, but it's a working solution until all major browsers [read IE]
implement CSS3.
answered Aug 27, 2010 at 19:19
casablancacasablanca
68.5k7 gold badges132 silver badges148 bronze badges
Well, you can stick one or more "soft hyphens" [
] in your long unbroken strings. I doubt that old IE versions deal with that correctly, but what it's supposed to do is tell the browser about allowable word breaks that it can use if it has to.
Now, how exactly would you pick where to stuff those characters? That depends on the actual string and what it means, I guess.
answered Aug 27, 2010 at 19:15
PointyPointy
394k59 gold badges574 silver badges607 bronze badges
1
The overflow-wrap
property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow.
.example {
overflow-wrap: break-word;
}
Syntax
overflow-wrap =
normal |
break-word |
anywhere
- Initial value:
normal
- Applies to: non-replaced inline elements
- Inherited: yes
- Computed value: as specified
- Animation type: discrete
Values
normal
: the default. The browser will break lines according to normal line breaking rules. Words or unbroken strings will not break, even if they overflow the container.break-word
: words or strings of characters that are too large to fit inside their container will break in an arbitrary place to force a line break. A hyphen character will not be inserted, even if thehyphens
property is used.inherit
: the targeted element must inherit the value of theoverflow-wrap
property defined on its immediate parent.
The demo below has a toggle button that allows you to switch between normal
and break-word
.
To demonstrate the problem that overflow-wrap
attempts to solve, the demo uses
an unusually long word inside a relatively small container. When you toggle break-word
on, the word is broken to accommodate the small amount of space available, as if the word were multiple words.
A string of non-breaking space characters [
] would be treated the same way and would also break at an appropriate spot.
overflow-wrap
is useful when applied to elements
that contain unmoderated user-generated content [like comments sections]. This can prevent long URLs and other unbroken strings of text [e.g. vandalism] from breaking a web page’s layout.
Similarities to the word-break
property
overflow-wrap
and word-break
behave very similarly and can be used to solve similar problems. A basic summary of the difference, as explained in the CSS specification is:
overflow-wrap
is generally used to avoid problems with long strings causing broken layouts due to text flowing outside a container.word-break
specifies soft wrap opportunities between letters commonly associated with languages like Chinese, Japanese, and Korean [CJK].
After describing examples of how word-break
can be used in CJK content, the spec says: “To enable additional break opportunities only in the case of overflow, see overflow-wrap
“.
From this, we can surmise that word-break
is best used with non-English
content that requires specific word-breaking rules, and that might be interspersed with English content, while overflow-wrap
should be used to avoid broken layouts due to long strings, regardless of the language used.
The historical word-wrap
property
overflow-wrap
is the standard name for its predecessor, the word-wrap
property. word-wrap
was originally a proprietary Internet Explorer-only feature that was eventually supported in all browsers despite not
being a standard.
word-wrap
accepts the same values as overflow-wrap
and behaves the same way. According to the spec, browsers “must treat word-wrap
as an alternate name for the overflow-wrap
property, as if it were a shorthand of overflow-wrap
“. Also, all user agents are required to support word-wrap
indefinitely, for legacy reasons.
Both overflow-wrap
and word-wrap
will pass CSS validation as long as the validator is set to
test against CSS3 or higher [currently the default].
Browser support
Desktop
23 | 49 | 11 | 18 | 6.1 |
Mobile / Tablet
105 | 104 | 4.4 | 7.0-7.1 |
More information
- CSS Text Module Level 3 Specification [W3C]
- Handling Long Words and URLs [CSS-Tricks]
- Word-Wrap: A CSS3 Property That Works in Every Browser [Louis Lazaris]
word-break
vs.overflow-wrap
[Stack Overflow]- How to Prevent Line Breaks Using CSS [DigitalOcean]
How do you separate text in CSS?
How do I show text on the next line?
: The Line Break element. The
HTML element produces a line break in text [carriage-return].