css文字强制换行的方法,用word-wrap属性
在默认情况下,如果文本的内容超过某个div块的宽度的话,就会发生自动换行,因为div块的white-space属性的默认值是normal。但是也有两种情况:
1、如果div块里是一串的文字内容,那么到了div块的width限制时,会自动换行。
2、如果div块里一串没有空格的字母或者数字的时候是那就不换行了,而是直接溢出div块。这时就要考虑css文字强制换行了。
那CSS样式怎么控制文字的强制换行?
这时候我们需要用到word-wrap属性,还有一个属性word-break也能够解决换行问题,但是它的浏览器兼容性不好,并且还有可能导致其他问题,所以这里不建议使用。
word-wrap的break-word属性值可以导致换行,一般说来如果一个单词比较长的话,行末的空间不足以容纳这个单词就会产生换行,而不是将一个单词截断,word-break的break-all属性值可以截断一个单词
<style type="text/css">.first
{
width:120px
height:60px
border:1px solid blue
word-wrap:break-word
}
.second
{
width:120px
height:60px
border:1px solid red
word-break:break-all
}
"<HTML>
<title>css控制字数</title>
<head>
<style type=""text/css"">
.dd
{
border: solid 1px gray
width:180px
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
course:hand
}
</style>
</head>
<body>
<span CLASS=""dd"">
信心网用CSS控制文章标题字数信心网用CSS控制文章标题字数信心网用CSS控制文章标题字数
</span>
<br>
<div CLASS=""dd"">
信心网用CSS控制文章标题字数信心网用CSS控制文章标题字数信心网用CSS控制文章标题字数
</div>
</body>
</HTML>
其中white-space 属性设置怎么处理元素内的空白。
这样个属性声明新建布局过程中怎么处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。
1.继承性:Yes
JavaScript 语法
CSS 属性也可通过一段 JavaScript 被动态地改变。
2.脚本语法:
object.style.whiteSpace=""nowrap""在我们的 HTML DOM 教程中,您可找到更多有关 whiteSpace 属性的细节。
p
{
white-space: normal
}
可能的值
值 描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre>标签。
nowrap 文本不太会换行,文本会在在同一行上继续,直到遇到 <br>标签为止。
名称:text-overflow
分类:IE专有样式
简述:设置是不是用省略号标示文本溢出
概述:text-overflow是设置是不是用省略号标示文本溢出的样式(Style)。
text-overflow清楚表明语法:
text-overflow : clip | ellipsis
取值:
clip : 默认值。不显示省略标记(...),而是容易的裁切
ellipsis : 当对象内文本溢出时显示省略标记(...)
overflow 属性设置当元素的内容溢出其区域时发生的事情。
继承性:No
表明
这样个属性定义溢出元素内容区的内容会怎么处理。假如值为 scroll,不论是不是要要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可放下全部内容也会显现滚动条。
JavaScript 语法
CSS 属性也可通过一段 JavaScript 被动态地改变。
脚本语法:
object.style.overflow=""hidden""在我们的 HTML DOM 教程中,您可找到更多有关 overflow 属性 的细节。
在我们的 HTML DOM 教程中,您也可找到完整的 Style 对象参考手册。
例子
p
{
overflow: scroll
}
可能的值
值 描述
visible 默认。内容不太会被修剪,会呈目前元素之外。
hidden 内容会被修剪,然而浏览器不太会显示供查看内容的滚动条。
scroll 内容会被修剪,然而浏览器会显示滚动条以便查看其余的内容。
auto 假如内容被修剪,则浏览器会显示滚动条以便查看其余的内容。"
css限制显示字数,文字长度超出部分用省略号表示
为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字。这在列表条目,题目,名称等地方常用到。
(1).文字超出一行,省略超出部分,显示'...'
如果这种情况比较多,可以取一个切合作用的类名用于复用。
.line-limit-length {
overflow: hidden
text-overflow: ellipsis
white-space: nowrap//文本不换行,这样超出一行的部分被截取,显示...
}
<div class="item">
<p class="line-limit-length">最新消息:神秘地球黑洞深不可测,不停吸入周围海水。</p>
<i class="icon icon-arrow-go"></i>//图标字体
</div>
一定要用CSS来完成的话,你可以设置一个宽度,具体的宽度值,根据你想要显示的字数的总宽度来定,然后使用overflow:hidden,隐藏超出这个宽度的字符,这样其实就是制造一个假象,当用户添加的标题字数超过这个宽度时就不显示了,用户自然就会更改了,但是,前面说了,这只是一个假象。CSS应该控制不了,应该用VBscript或javascript来实现,那样就简单多了。