CSS禁止文本自动换行代码

作者:divcss教程吧      点击次数:445次     发布日期:2015-01-16

CSS禁止文本自动换行代码

例子1

 

 代码如下 复制代码

<!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" />
<title>CSS 禁止自动换行</title>
<style type="text/css">
p {white-space:nowrap}
</style>
</head>
 
<body>
<p>这是禁止了自动换行的文本测试,这是禁止了自动换行的文本测试,这是禁止了自动换行的文本测试,这是禁止了自动换行的文本测试,这是禁止了自动换行的文本测试,这是禁止了自动换行的文本测试,这是禁止了自动换行的文本测试,这是禁止了自动换行的文本测试,这是禁止了自动换行的文本测试,<p>
</body>
</html>

下面这个例子可以实现文本只有在遇到空格或者是换行符的时候才能换行,比如:

 

 代码如下 复制代码

<style type="text/css">
div{width:300px;border:1px solid red;margin:10px;overflow:hidden;}
.nowrap{white-space:nowrap;}
</style>
<div class="nowrap">这是一段很长的文字,divcss8中间没有空格,也没有换行,它不会自动换行直到被截取掉</div>
<div>这是一段很长的文字,中间没有空格,也没有换行,但它会自动换行</div>

上面两个div里超宽的文字,第一个里面的被禁止换行,然后超宽的被截取了;第二个不做设置,于是自动换行了

分享DIVCSS8