Split too long words with '-' character

Question

I'm testing some html and css stuff, and i have a problem.

I have some divs floating next to each other with width:15%;, and when i type long words, they overlap. I found a solution by using word-wrap:break-word.

but: i think it's kind of weird to split a word without a dash (-) character.

so, right now, my div looks like this:

<style>
    .floating-div{
       margin: 1px;
       float: left;
       padding: 1%;
       word-wrap: break-word;
    }
</style>

<div class="floating-div">
      <p>Hexakosioihexekontahexaphobia</p> <!--Just a random long word-->
</div>


|---------------|
|hexakosioihexe |
|kontahexaphobia|
|               |
|---------------|

can i somehow make it automatically add a dash like this? (by using css or javascript)

|----------------|
|hexakosioihexe- |
|kontahexaphobia |
|                |
|----------------|

Off: This word is the title of the new Bethlehem album. – emerson.marini Oct 04 '14 at 15:01 — emerson.marini, Oct 04 '14 at 15:01

score 6 · Accepted Answer · edited May 23 '17 at 12:25

6

It's not fully supported by you can use hypens which is added in css.

how to use automatic css hyphens with word-break: break-all?

 -ms-word-break: break-all;
 word-break: break-all;

 /* Non standard for webkit */
 word-break: break-word;

 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;

edited May 23 '17 at 12:25

Community

1
1

answered Oct 04 '14 at 15:03

Tim

9,351
1
32
48

1

There are also js solutions: http://stackoverflow.com/questions/5963915/how-to-hyphenate-string-text-in-a-textarea-using-jquery. BTW this blog helped me a while back: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ – Tim Oct 04 '14 at 15:06

score 0 · Answer 2 · answered Oct 04 '14 at 21:00

For English and many other languages, it is outright wrong to break a word without adding a hyphen. It is also wrong to break words at arbitrary points, which is what word-wrap: break-word does.

To properly break a word in English, you need hyphenation. There are several approaches to it and many existing questions at SO. But in this case, since the word is an invented one, you cannot expect to have it correctly hyphenated by automatic hyphenators. They may get it right by accident or because they apply algorithms that are suitable in this case. But the only really safe way is to add manually hyphenation hints, using SOFT HYPHEN characters, e.g.

Hexakosioihexe&shy;kontahexaphobia

It is up to you decide on the permissible break points. I would probably use

Hexa&shy;kosioih&shy;exe&shy;konta&shy;hexa&shy;phobia

JavaScript is not needed, but this could also be done using client-side JavaScript that processes the text of a document and replaces words with their “hyphenated” versions (i.e. versions soft hyphens), using a simple replacement table. This could be useful to retain source code readability or to simplify things when the same word appears several times.

score -1 · Answer 3 · answered Oct 04 '14 at 15:16

-1

try this

width="auto"; // in css

so that it covers the size of the div according to the words lie in the div. hope this helps

answered Oct 04 '14 at 15:16

Syed Muhammad Zeeshan

1,027
7
16

Split too long words with '-' character

3 Answers3