line-break与中文排版换行实例页面
回到相关文章 »效果：
宽度调整，当前：
auto:
这里有个弯弯符号〜加“引号”然后最后有个问号？
后面是普普通通一句话。
loose:
这里有个弯弯符号〜加“引号”然后最后有个问号？
后面是普普通通一句话。
normal:
这里有个弯弯符号〜加“引号”然后最后有个问号？
后面是普普通通一句话。
strict:
这里有个弯弯符号〜加“引号”然后最后有个问号？
后面是普普通通一句话。
anywhere:
这里有个弯弯符号〜加“引号”然后最后有个问号？
后面是普普通通一句话。
对比
break-all:
这里有个弯弯符号〜加“引号”然后最后有个问号？
后面是普普通通一句话。
代码：
CSS代码：
.wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; outline:1px dotted; }
.auto { line-break: auto; }
.loose { line-break: loose; }
.normal { line-break: normal; }
.strict { line-break: strict; }
.anywhere { line-break: anywhere; }
.break-all{ word-break: break-all; }
HTML代码：
<div lang="zh"> <p class="wrapbox auto">auto:<br>这里有个弯弯符号〜加“引号”然后最后有个问号？<br>后面是普普通通一句话。</p> <p class="wrapbox loose">loose:<br>这里有个弯弯符号〜加“引号”然后最后有个问号？<br>后面是普普通通一句话。</p> <p class="wrapbox normal">normal:<br>这里有个弯弯符号〜加“引号”然后最后有个问号？<br>后面是普普通通一句话。</p> <p class="wrapbox strict">strict:<br>这里有个弯弯符号〜加“引号”然后最后有个问号？<br>后面是普普通通一句话。</p> <p class="wrapbox anywhere">anywhere:<br>这里有个弯弯符号〜加“引号”然后最后有个问号？<br>后面是普普通通一句话。</p> </div> <h4>对比</h4> <p class="wrapbox break-all">break-all:<br>这里有个弯弯符号〜加“引号”然后最后有个问号？<br>后面是普普通通一句话。</p>