<!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>如何将长词representations设置为两行两部分，representation在第二行末尾，sentations在第二行第三行的开头？
hyphens: auto; 不能在这里工作？
如何在断字中间添加字符-？
最佳答案
为获得最佳效果，请使用 。它会比自动断字更有效，但它会在所有浏览器中正常工作。
<p style="width:300px; ">Web graphics are visual representations used on a Web site to enhance or enable the repre­sen­tation
of an idea or feeling, in order to reach the Web site user. Graphics may enter­tain, educate, or emotionally
impact the user, and are crucial to strength of branding, clarity of illustration, and ease of use for inter­faces.
Examples of graphics include maps, photo­graphs, designs and patterns, family trees, diagrams, archi­tectural
or engi­neering blue­prints, bar charts and pie charts, typography, schematics, line art, flowcharts, and many other image forms.
</p>关于css - 如何在 CSS 中打断单词时在单词末尾设置断字？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37041843/