3

I want to wrap words at a defined position.

In Germany, we have sometimes very long words which are composed out of several nouns. I would like to wrap such long composed words at the boundaries of two words if the word is too long and a word wrap is necessary.

For example, we have the word "Unternehmenskunden" which means corporate (Unternehmens) customer (Kunde). I want that this word would break into "Unternehmens" and "kunde". I tried to wrap the two word parts into there own spans but that did not affect the wrap. The CSS classes word-break and word-wrap doesn't have a value for that.

I tried to wrap a space into its own span and remove it with display: none or shrink it with width: 0;

Is there maybe some kind of hidden character which marks a word break but doesn't

Here is a fiddle which could help illustrate what I try to achieve and what I tried so far: https://jsfiddle.net/nbk9ptay/3/

coderuby
  • 1,188
  • 1
  • 11
  • 26
  • 2
    That is not a duplicate. I don't want to know how to word wrap at an arbitrary position. I want to know how to wrap at a specified position. – coderuby Feb 25 '19 at 15:00
  • Yeah, there are answers on the page for that, such as https://stackoverflow.com/a/1147915/5827005, or https://stackoverflow.com/a/1147918/5827005 – GrumpyCrouton Feb 25 '19 at 15:01
  • 1
    Nice! Thank you @GrumpyCrouton. I haven't thought to find an answer for that in questions regarding an arbitrary word wrap! Thank you for pointing that out to me! – coderuby Feb 25 '19 at 15:08
  • You're welcome :) – GrumpyCrouton Feb 25 '19 at 15:09

2 Answers2

5

Thanks to @GrumpyCrouton I found a solution for an arbitrary word wrap.

The solution is to use either a soft hyphen (­) if you want to have a hypen in case of a word wrap How to word wrap text in HTML?:

<div style="width: 120px; border: 1px solid red;">Unternehmens&shy;kunde</div>

<div style="width: 200px; border: 1px solid red;">Unternehmens&shy;kunde</div>

Or to use html entity &#8203; if you don't want a hypen in case of a word wrap How to word wrap text in HTML?:

<div style="width: 120px; border: 1px solid red">Unternehmens&#8203;kunde</div>

<div style="width: 200px; border: 1px solid red">Unternehmens&#8203;kunde</div>
coderuby
  • 1,188
  • 1
  • 11
  • 26
2

Use inline-block spans to wrap sub words.

Then you have a delineation you can control. It's up to you how the separation gets styled. Using inline-block, just by the nature of HTML you will get a complete long word when there's enough width, and a split double-line when broken down.

Also, if it helps, here's a post touching on truncation and scaling font-size.

Codepen

.container {
  width: 250px;
}

.subword {
 display: inline-block;
}
<div style="width: 800px; border: 1px solid black; margin-bottom: 4em;">
<span class="subword">Unternehmens</span><span class="subword">kunde</span>
</div>

<div style="width: 100px; border: 1px solid black;">
<span class="subword">Unternehmens</span><span class="subword">kunde</span>
</div>
Kalnode
  • 9,386
  • 3
  • 34
  • 62