Break non-hyphenated compound words at word boundary

Question

I am using Bootstrap. Let us say I have text that looks like this:

"Stackoverflow"

Can I somehow automatically make sure that it breaks like this if the text does not fit the container:

"Stack
-overflow"

instead of:

"Stackov
-erflow"

with HTML/CSS?

Doesn't it have to be `Stack-` and `overflow`? In Dutch that's the correct way, don't know in English btw... — Jeroen Bellemans, Apr 22 '16 at 11:21
Might be worth noting that if you're writing the name of SO in a document, it is actually named `Stack Overflow` (with a space), not `Stackoverflow` ;) — Kai, Apr 22 '16 at 13:06
possible duplicate of [In HTML, how to word-break on a dash?](http://stackoverflow.com/q/904/1048572) — Bergi, Apr 22 '16 at 13:35
For a start, the site is called "Stack Overflow", not "Stackoverflow", so you would simply break at the space. — Lightness Races in Orbit, Apr 22 '16 at 14:57
Can we just assume that this is an example of a compound word, not the actual text, instead of telling OP that the problem is they're spelling Stack Overflow wrong? As a general question, I can see this being helpful to others. — Darrick Herwehe, Apr 22 '16 at 19:49

score 46 · Accepted Answer · answered Apr 22 '16 at 11:32

46

You can insert  (soft hyphen)

#box {
  font-size:14px;
  font-family:courier;
  width:90px;
  background:yellow;
 }

<div id="box">Stack&shy;overflow</div>

answered Apr 22 '16 at 11:32

jayms

3,828
2
11
18

16

If you can't use `` because you're not using some variant of (X)HTML (XML, Markdown, plain text…) you can use the equivalent Unicode character U+00AD (`` in XML). – David Foerster Apr 22 '16 at 14:25

score 21 · Answer 2 · edited Apr 23 '16 at 10:04

21

You can use the <wbr> tag:

p {
  width: 60px;
  border: 1px solid black;
}

<p>Stack<wbr>overflow</p>

edited Apr 23 '16 at 10:04

Peter Mortensen

30,738
21
105
131

answered Apr 22 '16 at 11:17

Nenad Vracar

118,580
15
151
176

12

This does not hyphenate the word break, I don't think this is what the OP is looking for. – Bergi Apr 22 '16 at 13:25
You can add a hyphen at the wbr tag with css. – kojiro Apr 23 '16 at 13:08

score 9 · Answer 3 · edited Apr 23 '16 at 10:07

9

No, for a document "Stackoverflow" is a single word. If you are using a CSS property to break the word then it will break according to the space available.

You have to define it if you want to break it from a particular point.

You can use Stack<wbr>overflow or Stack-overflow.

If use Stack<wbr>overflow, then it will be broken at <wbr>.

p.test1 {
    width: 60px;
    border: 1px solid #000000;
}

<p class="test1">Stack<wbr>overflow</p>

OR, if using Stack-overflow and using CSS property word-break: keep-all; then it will be broken at hyphens:

p.test1 {
    width: 60px;
    border: 1px solid #000000;
    word-break: keep-all;
}

<p class="test1">Stack-overflow</p>

But you have to define one of them.

edited Apr 23 '16 at 10:07

Peter Mortensen

30,738
21
105
131

answered Apr 22 '16 at 11:17

Gaurav Aggarwal

9,809
6
36
74

`` does not hyphenate the word break, I don't think that was asked for. – Bergi Apr 22 '16 at 13:27
With the example with the dash (`-`), the dash appears even when the word fits. – Solomon Ucko Apr 23 '16 at 00:07
@bergi thats why i have given another answer also – Gaurav Aggarwal Apr 23 '16 at 03:39

score 4 · Answer 4 · answered Apr 22 '16 at 23:40

If you want to break a specific word, then the answers given will work - insert an invisible break of some kind. It does, as pointed out, harm search results, but not so bad as you'd think.

If you want to break all compound terms that need wrapping, without manually going through and checking, then there is no way to do this, because you need context-sensitive English language parsing, which means you need a human brain doing it.

Consider how you would break the following strings:

lowrateslender.com
musictoyourears.com
heresearch.com
nakedsnow.com
picturespain.com
catspaying.net
attackshoes.com
williamsharp.net
andreward.net
goalsnow.net
hesstruck.net
artistrap.com
buildingskill.com
bearspray.com
atticsweep.com
matthewhale.com
singershaven.com
shoesworn.com
sinuscatscan.com
cometart.com
monkeyslap.com
scriptshack.com
nasalbum.com
moviesick.com
arizonasparesort.com
privateshot.com
nationsprinting.com
importcarshow.com

(copy-pasted from a google search for "ambiguous domain names")

...even given a dictionary to identify whole words within these terms, and inserting breaking spaces at those boundaries, it'd be a toss-up whether you would split these words as, say, "import-car-show" or "import-cars-how".

One of the main skills for programming is identifying algorithms which require natural language processing, and opting just for a "good enough" algorithm rather than wasting time on it. This is one such case.

Well that's exactly what `` is made for. It doesn't break search. — Bergi, Apr 23 '16 at 11:58
@Bergi What algorithm are you using to insert this in the right places? You end up with the same problem. Domains do not intrinsically contain ``. — Dewi Morgan, Jun 08 '16 at 15:42
`` is inserted by the *authors* in the HTML source, not by word-wrapping algorithms. — Bergi, Jun 08 '16 at 18:56
@Bergi In that case, I refer you to the first sentence of my answer. — Dewi Morgan, Jul 20 '18 at 20:29

score 2 · Answer 5 · edited Apr 23 '16 at 10:10

2

You can use zero-width space, . Just type Stackoverflow in HTML.

edited Apr 23 '16 at 10:10

Peter Mortensen

30,738
21
105
131

answered Apr 22 '16 at 11:21

Yuriy Yakym

3,616
17
30

4

This solution really is the wrong one. It breaks search, for example. – Bergi Apr 22 '16 at 13:36
5

Doesn't get more hacky than this. – Lightness Races in Orbit Apr 22 '16 at 14:58

Break non-hyphenated compound words at word boundary

5 Answers5