Jquery中文网 > CSS教程 > 经典实例 > 正文 CSS禁止文本自动换行代码

CSS禁止文本自动换行代码

发布时间：2020-05-10 编辑：www.jquerycn.cn

jquery中文网为您提供CSS禁止文本自动换行代码等资源，欢迎您收藏本站，我们将为您提供最新的CSS禁止文本自动换行代码资源

使用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 禁止自动换行</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里超宽的文字，第一个里面的被禁止换行，然后超宽的被截取了；第二个不做设置，于是自动换行了

您可能感兴趣的文章：
CSS禁止文本自动换行代码
 JS禁止浏览器后退键的实现代码
 CSS禁止鼠标点击事件例子
 javascript右键弹出图片另存为对话框的代码
 win2003服务器安全设置之系统服务篇
 javascript禁止网页右键的方法
 jquery限制只能输入数字禁止复制粘贴与输入法切换
 JS如何禁止选中文本
 javascript禁止页面操作(右键、复制、F5刷新)等代码
 javascript禁用浏览器后退按钮

上一篇：css文字大小单位px、pt、em 使用说明下一篇：css下clear both、left、right值的含义

[关闭]

CSS禁止文本自动换行代码

最近更新

浏览排行