0

<!DOCTYPE html>
<html>
<html lang="en">
<style type="text/css">
p {   
hyphens: auto;
word-break: break-all;
width:360px;
}
</style>
<div class="test">
<p>Web graphics are visual representations used on a Web site to enhance or enable the representation 
of an idea or feeling, in order to reach the Web site user. Graphics may entertain, educate, or emotionally 
impact the user, and are crucial to strength of branding, clarity of illustration, and ease of use for interfaces.
Examples of graphics include maps, photographs, designs and patterns, family trees, diagrams, architectural
 or engineering blueprints, bar charts and pie charts, typography, schematics, line art, flowcharts, and many other image forms.
</p>
</div>
</html>

How to set the long words representations as two parts in two lines,repre- at the end of second line and sentations at the beginging of third line?
hyphens: auto; can't work here?
How to add character - at the middle of breaked word?

showkey
  • 482
  • 42
  • 140
  • 295

2 Answers2

2

For best results, use &shy;. It will be more work than automatic hyphenation, but it will work correctly in all browsers.

<p style="width:300px; ">Web graphics are visual representations used on a Web site to enhance or enable the repre&shy;sen&shy;tation 
of an idea or feeling, in order to reach the Web site user. Graphics may enter&shy;tain, educate, or emotionally 
impact the user, and are crucial to strength of branding, clarity of illustration, and ease of use for inter&shy;faces.
Examples of graphics include maps, photo&shy;graphs, designs and patterns, family trees, diagrams, archi&shy;tectural
 or engi&shy;neering blue&shy;prints, bar charts and pie charts, typography, schematics, line art, flowcharts, and many other image forms.
</p>
  • This is not solution which will work dynamically, So that I need to add customize each and every paragraph I am adding in my site. – Murali Jun 24 '16 at 05:29
  • Right, as I said in my answer. However, is this not better than a solution which will not work at all in the most commonly used browser? –  Jun 24 '16 at 05:43
1

This is the one what you are looking for. Hope this helps.

<!DOCTYPE html>
<html>
<html lang="en">
<style type="text/css">
p {   
hyphens: auto;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
width:360px;
}
</style>
<div class="test">
<p>Web graphics are visual representations used on a Web site to enhance or enable the representation 
of an idea or feeling, in order to reach the Web site user. Graphics may entertain, educate, or emotionally 
impact the user, and are crucial to strength of branding, clarity of illustration, and ease of use for interfaces.
Examples of graphics include maps, photographs, designs and patterns, family trees, diagrams, architectural
 or engineering blueprints, bar charts and pie charts, typography, schematics, line art, flowcharts, and many other image forms.
</p>
</div>
</html>

We can see that result is working fine as expected (hyphenation) in Firefox and some other browsers , In Google chrome even though hyphenation not seems to be works well but it won't break word, It will adjust the word correctly.

Murali
  • 1,084
  • 1
  • 11
  • 28
  • It's odd that the accepted answer does not work on the most popular browser in the world. –  May 05 '16 at 14:06
  • Chrome, any version. –  Jun 24 '16 at 05:01
  • @torazaburo , Can you please mention where it is not fine in my screenshot provided? I guess there is no break word in chrome.. In firefox '-' is getting added correctly. – Murali Jun 24 '16 at 05:28
  • In your google drive screenshot, hyphenation is not happening at all, and that's the entire point of this question! I'm glad it works in FF, but it's hardly a "solution" if it's limited to a few browsers. The fact that `hyphen` is not supported in Chrome was the point of my original comment, and also pointed out in a comment on the question. Hence, as it stands your answer is **wrong**, or at least very incomplete. You should change it to say, here is a solution which works on some browsers, but not Chrome. –  Jun 24 '16 at 05:47