CODEWITHSUNDEEP
htmlcss
Keivan Sabil...
Keivan Sabil...

Reputation: 95

using manual hyphenating does not work

According to fiddle I have tried to using manual hyphenating, on my code I used (­) sign over "between" word but the answer gave no hyphen in output! What is my problem?

Here is the Fiddle.

HTML

<p>word-spacing to zero to remove the space betwe&shy;en inline-block</p>

CSS

p{
background-color:lightblue;
text-align:justify;
word-break:break-all;
width:160px;
hyphens: manual;

}

Upvotes: 0

Views: 569

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201508

The SOFT HYPHEN character, which is what &shy; evaluates to, is an optional hyphen according to its Unicode definition, which is what applies in HTML. This means that it indicates a permissible hyphenation point. Nothing more, nothing less.

Your code uses word-break: break-all;, which allows any string to be broken directly, with no hyphenation indication, as needed to satisfy the formatting requirements. In this case, it may e.g. cause the word “remove” to be split to “r” and “emove”. Such settings should of course be used only for languages and notational systems that allow such breaking, not e.g. for the English language.

What matters here is that due to breaking words that badly, the browser will have no need to consider hyphenating “between” later on (depending on font as usual). So it simply ignores the optional hyphenation point.

If you remove the word-break: break-all; declaration, then, assuming Times New Roman (the common default font) is used, browsers indeed hyphenate “between” as “betwe-” and “en” as suggested (which is a grossly wrong hyphenation, but that’s not important right now). This takes place even without hyphens: manual, which tells the browser to apply only the manual hyphenation hints and is actually just the initial value and the common default value. Using hyphens: auto allows browsers to use hyphenation hints and apply their own hyphenation algorithms, if they have them.

Example (on request as per comment, but using a correct hyphenation hint in the word “between”):

p{
font: 16px Times New Roman;
background-color: lightblue;
text-align: justify;
width: 160px;
}
<p>word-spacing to zero to remove the space be&shy;tween inline-block</p>

Upvotes: 2

Choco
Choco

Reputation: 1064

Try Some thing like this..

<p>word-spacing to zero to remove the space betwe &#45;en inline-block</p>

for any further please check this

http://www.ascii.cl/htmlcodes.htm

Upvotes: 0

Related Questions