Question

＆＃13;

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

＆＃13;

如何将长单词representations设置为两行中的两个部分，第二行末尾为repre-，第三行为sentations？ hyphens: auto;无法在这里工作？
如何在突破单词的中间添加字符-？

Answer 1

为获得最佳效果，请使用。这将比自动连字更多，但它可以在所有浏览器中正常工作。

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

Answer 2

这是你要找的那个。希望这会有所帮助。

＆＃13;

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

＆＃13;

我们可以看到结果正如预期的那样正常在Firefox和其他一些浏览器中使用（连字符），在谷歌浏览器中，即使连字符似乎不能正常工作但它不会破坏单词，它会正确调整单词。

如何在CSS的单词结尾处设置连字符？

2 个答案: