a CSS property that defines how to break or wrap lines within words
Questions tagged [word-break]
147 questions
136
votes
5 answers
Difference between overflow-wrap and word-break?
What´s the exact difference between overflow-wrap/word-wrap and word-break?
And can anybody tell me what´s the better one for breaking very long links? Most people say you should use word-break in combination with overflow-wrap but it doesn't look…
Anselm
- 7,450
- 3
- 28
- 37
80
votes
6 answers
Smarter word break in CSS?
If I just put word-break: break-all on an element, I often end up with this:
Hello people, I am typing a mes
sage that's too long to fit!
Obviously this would be much better as:
Hello people, I am typing a
message that's too long to fit!
But…
Niet the Dark Absol
- 320,036
- 81
- 464
- 592
40
votes
4 answers
How to use automatic CSS hyphens with `word-break: break-all`?
I'm using word-break: break-all; and want to know how I can have the browser automatically insert the hyphens, as demonstrated in an MDN example.
div {
width: 80px;
height: 80px;
display: block;
overflow: hidden;
border: 1px solid…
chovy
- 72,281
- 52
- 227
- 295
24
votes
8 answers
How can I allow text to wrap inside a word if necessary?
I am looking for the best solution to allow text to wrap in the middle of a word if necessary. By best, I mean most browser-compatible, and will favor word breaks before it breaks inside a word.
It would also help if the markup looked nicer than…
D'Arcy Rittich
- 167,292
- 40
- 290
- 283
15
votes
2 answers
Show hyphens only when necessary? (soft-hyphens doesn't cut it)
Is it possible to use hyphens, or soft-hyphens in CSS, in such a way that hyphens are not rendered unnecessarily?
My goal is to keep the original text as much as possible and break any words unless absolutely critical because they are too long to…
Drkawashima
- 8,837
- 5
- 41
- 52
14
votes
5 answers
Alternative for `word-break: break-word`
Is there an alternative for word-break: break-word that works in firefox ?
In firefox[Version 57.0]
In Chrome[Version 62.0.3202.94]
Is there a way or an alternative to use break-word attribute in firefox also.? [if it works in older versions it…
Jithin Raj P R
- 6,667
- 8
- 38
- 69
14
votes
1 answer
CSS, Text overflows out of table cell
I am working on Virtual Machine so I can't copy code... I will post the screens then. Problem is trivial I guess but I can't deal with it... please give me some suggestions:
Table code:
https://dl.dropboxusercontent.com/u/108321090/WWW1.png
CSS code…
F1sher
- 7,140
- 11
- 48
- 85
12
votes
1 answer
Difference between word-wrap: break-word and word-break: break-word
I needed to fix some CSS somewhere because my text wasn't wrapping around and was instead going on indefinitely if it was an extremely long word.
Like in most cases, I tried word-wrap: break-word; in my CSS file and it did not work.
Then, to my…
David
- 7,028
- 10
- 48
- 95
10
votes
5 answers
Css for an element that allows break-word on child divs, but that can also expand to take the width of its children
I'm trying to determine whether it's possible to create css for an element that supports word-wrap:break-word, but that also expands to take the width of its children when breaking is not possible.
example html:
Martin Sansom
- 81
- 1
- 2
8
votes
2 answers
word-break, prefer normal but if not possible break-all
I am creating a very thin page (it's being printed on receipt paper: 56mm wide)
I am trying to display some text (in this case shipping selection). Sometimes this text is normal a number of spaced words, e.g. 'Signed for 1st Class', sometimes it is…
mattumotu
- 1,436
- 2
- 14
- 35
7
votes
3 answers
Word-wrap doesn't respect parent's width for long non-break text
.container {
/*
Container's width can be dynamically resized.
I put width = 300px in the example to demonstrate a case
where container's width couldn't hold second msg
*/
width: 300px;
display: flex;
…
Phuc Nguyen
- 73
- 1
- 5
7
votes
2 answers
Custom break word
I'm working on a map legend and I have some trouble when the word is too long.
I want to know if it's possible to add some property to the text so it break to the last symbol space, score, underscore, slash, and other punctuation
In other words, I…
Luckyn
- 563
- 1
- 4
- 21