css设置文字自动折行，遇到整个单词时截断，并用中划线-连接

<style>
 #test1 {
 clear: both;
 width: 50%;
 text-align: justify;
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;
    }
</style>
<div id="test1" lang="en">
    For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.
</div>

重点：

hyphens: auto;

lang="en"

文字全铺满是依靠：

text-align: justify;

效果：

转载于:https://my.oschina.net/cherryzhang/blog/633811