it_is_a_literature it_is_a_literature - 5 months ago 204
CSS Question

How to set hyphenation at the end of word when to break word in CSS?



<!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?

Answer

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.

Comments