现在的位置: 首页 > 软件开发 > 正文

CSS自动换行的7样写法

2014年02月08日 软件开发 ⁄ 共 4971字 暂无评论 ⁄ 被围观 11+

CSS自动换行(包含中英文)的7样写法效果:

.c1{ width:300px; border:1px solid red}

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
This is all English. This is all English. This is all English.
全是中文的情況。全是中文的情況。全是中文的情況。
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
This is all English. This is all English. This is all English.
全是中文的情況。全是中文的情況。全是中文的情況。
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
This is all English. This is all English. This is all English.
全是中文的情況。全是中文的情況。全是中文的情況。
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
This is all English. This is all English. This is all English.
全是中文的情況。全是中文的情況。全是中文的情況。
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

.c5{ width:300px;word-break:break-all; border:1px solid black}

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
This is all English. This is all English. This is all English.
全是中文的情況。全是中文的情況。全是中文的情況。
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

.c6{ width:300px;word-break:keep-all; border:1px solid red}

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
This is all English. This is all English. This is all English.
全是中文的情況。全是中文的情況。全是中文的情況。
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
This is all English. This is all English. This is all English.
全是中文的情況。全是中文的情況。全是中文的情況。
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

源码:

[php]<html>
<head>
<title>自動換行 CSS 例子</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.c1{ width:200px; border:1px solid red}
.c2{ width:200px;word-wrap:break-word; border:1px solid yellow}
.c3{ width:200px;word-wrap:break-word;word-break:break-all; border:1px solid green}
.c4{ width:200px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
.c5{ width:200px;word-break:break-all; border:1px solid black}
.c6{ width:200px;word-break:keep-all; border:1px solid red}
.c7{ width:200px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
</style>
</head>

<body>
.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>
</body>
</html>[/php]

综上,优选c2和c7的效果。

给我留言

您必须 [ 登录 ] 才能发表留言!

×
#