挟制不换行断词方式 _Web前端

强制不换行断词方式

<html>
??? <head>
??? </head>
??? <body>
<style>
.c1{ width:300px;?? border:1px solid red}
.c2{ width:300px;word-wrap:break-word;?? border:1px solid yellow}
.c3{ width:300px;word-wrap:break-word;word-break:break-all;?? border:1px solid green}
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
.c5{ width:300px;word-break:break-all;?? border:1px solid black}
.c6{ width:300px;word-break:keep-all;?? border:1px solid red}
.c7{ width:300px;word-wrap:break-word;overflow:auto;?? border:1px solid yellow}
.c8{ width:300px;word-wrap:break-word; word-break:keep-all; overflow:auto;?? border:1px solid red}
.c9{ width:300px;white-space:nowrap; border:1px solid blue}
</style>

.c1{ width:300px;?? border:1px solid red}
<div class="c1">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c1>
This is all English. This is all English. This is all English.
</div>
<div class=c1>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c1>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>

<br>
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
<div class="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c2>
This is all English. This is all English. This is all English.
</div>
<div class=c2>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c2>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>

<br>
.c3{ width:300px;word-wrap:break-word;word-break:break-all;?? border:1px solid green}
<div class="c3">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c3>
This is all English. This is all English. This is all English.
</div>
<div class=c3>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c3>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>

<br>
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
<div class="c4">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c4>
This is all English. This is all English. This is all English.
</div>
<div class=c4>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c4>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>

<br>
.c5{ width:300px;word-break:break-all;?? border:1px solid black}
<div class="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c5>
This is all English. This is all English. This is all English.
</div>
<div class=c5>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c5>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>

<br>
??? .c6{ width:300px;word-break:keep-all;?? border:1px solid red}
??? <div class="c6">
??? safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
??? </div>
??? <div class=c6>
??? This is all English. This is all English. This is all English.
??? </div>
??? <div class=c6>
??? 全是中文的情况。全是中文的情况。全是中文的情况。
??? </div>
??? <div class=c6>
??? 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
??? </div>

<br>
??? .c7{ width:300px;word-wrap:break-word;overflow:auto;?? border:1px solid yellow}
??? <div class="c7">
??? safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
??? </div>
??? <div class=c7>
??? This is all English. This is all English. This is all English.
??? </div>
??? <div class=c7>
??? 全是中文的情况。全是中文的情况。全是中文的情况。
??? </div>
??? <div class=c7>
??? 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
??? </div>
???
??? <br>
??? .c7{ width:300px;word-wrap:normal;overflow:scroll;?? border:1px solid yellow}
??? <div class="c7">
??? safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
??? </div>
??? <div class=c7>
??? This is all English. This is all English. This is all English.
??? </div>
??? <div class=c7>
??? 全是中文的情况。全是中文的情况。全是中文的情况。
??? </div>
??? <div class=c7>
??? 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
??? </div>
??? <br>
??? .c9{ width:300px;white-space:nowrap; border:1px solid blue}
??? <div class=c9>
??? ??? 全是中文的情况。全是中文的情况。全是中文的情况。
??? </div>
??? <div class=c9>
??? ??? 不含有br 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
??? </div>
??? <div class=c9>
??? ??? 含有br 中英文混排的情况。Chinese and English. 中英文混排的情况。这里有br<br/>Chinese and English. 中英文混排的情况。Chinese and English.
??? </div>
</body>
</html>

挟制不换行 断词方式

挟制不换行断词方式