CSS中强制换行与强制不换行的应用教程

发布时间:2019-07-31编辑:脚本学堂
网站搭建的过程中,有的内容需要强制换行,有的内容又要强制不换行,如何应用它们呢?看本文中的讲解即可找到答案。

/* 禁止换行 */
 

.nowrap{word-break:keep-all;white-space:nowrap;}

/* 强制换行 */

.break{word-break:break-all;}

具体用法:
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#layout { width:300px; height:200px; margin:0 auto; background:#ddd;word-break:break-all;}
#layout a {word-break:keep-all;white-space:nowrap;}
</style>
</head>
<body>
<div id="layout"><a href="#">这是第一块内容</a> <a href="#">这里第二块内容</a> <a href="#">这是第三块内容</a></div>
</body>
</html>

以上即是CSS中强制换行与强制不换行的应用,需要的朋友好好看看。