css禁止文本自动换行禁止出现滚动条

发布时间:2020-01-14编辑:脚本学堂
有关css禁止文本自动换行的方法,禁止在浏览器下方出现滚动条,可以使用word-break或white-space实现,具体见本文教程。

使用css样式 white-space:nowrap 可以定义某个区域内的内容是否可自动换行,默认是可以的。
如果设置的值为 nowrap 将禁止自动换行,内容超过窗体可显示的区域外时将在浏览器下方出现滚动条

在这行文字的td或div属性中,加入:
 

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

效果,如下:
css禁止文本自动换行

文本只有在遇到空格或者是换行符的时候才能换行,例如:
 

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

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