CSS样式解决英文换行断词问题
通常的我们在读取文章标题的时候,遇到字符过多,都是通过程序在SERVER端截取一定的字符数,然后添加...来实现标题长度截取的。其实我们也可以通过CSS来控制。
实列如下:
.title
{
width:200px;
white-space:nowrap;
word-break:keep-all;
overflow:hidden;
text-overflow:ellipsis;
}
可用span或div引用,例如:
<span class=title>客户端解决标题显示太长省略多余部分并加省略号的样式</span>
<div class=title>客户端解决标题显示太长省略多余部分并加省略号的样式</div>
以上2例显示在超过样式定义的200px宽度后,后面的字符将被...替换.
=============================================================================
(外一)
word-wrap : break-word ;word-break : break-all ;
word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。
break-word是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)
ie下:
使用word-wrap:break-word;所有的都正常。
让英文英文自动换行
style=”WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all”
还有一种情况,往往需要设置数据只在一行里显示,但调用数据的时候,当没有为数据设定固定的长度的话,无论是IE还是firefox,到达边界都会自动换行(就算是设置了,但又会有英文和中文的字数区别,字数限制的个数又会是一个让你头痛或需要取舍的问题)。
哪有什么更好的解决办法呢?其实可以用CSS 的 white-space: nowrap 来解决这个问题。使用这个css属性之后,文本只有在遇到空格或者是换行符的时候才能换行。
如果是要应用到displaytag上面去的话,就在displaytag table中加{styel:wordwrap:break-word;}或直接在displaytag.css中对display样式进行增加。
如果是要应用到table上面的直接写到table 中 {styel:wordwrap:break-word;},不用写在每个td中。而且要是被多个table引用的话,直接写到总样式中……
相关文档:
盒子标签和属性对照
CSS语法(不区分大小写)
JavaScript语法(区分大小写)
border
border
border-bottom
borderBottom
border-bottom-color
borderBottomColor
border-bottom-style
borderBottomStyle
border-bottom-width
borderBottomWidth
border-color
borderColor
border-left
borderLeft
border ......
作者:tinyhill 来自:蓝色理想 对 《5 个简单实用的 CSS 属性》进行编辑
1、CSS Clip
剪辑 (clip) 属性就像一个面具。它允许你使用矩形掩盖页面元素的内容。要剪辑一个元素:你必须指定其 position 属性为 absolute,然后指定相对于元素的 top,right,bottom,left 值。
图片剪辑实例(演示)
以下示例演示了如 ......
一、CSS文件及样式命名
1、CSS文件命名规范
全局样式:global.css;
框架布局:layout.css;
字体样式:font.css;
链接样式:link.css;
打印样式:print.css;
2、CSS样式命名规范
本人建议:用字母、_号工、-号、数字组成,必须以字母开头,不能为纯数字。为了开发后样式名管理方便,大家请用有意义的单 ......
1. document.formName.item("itemName") 问题
说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];
Firefox下,只能使用document.formName.elements["elementName"].
解决方法:统一使用document.formName.elements["elementName"].
2.集合类对象问题
说明:IE下,可 ......
一、css优先于位置也有关系
.vm与.vb 样式的定义在优先级别上是相同的,但是如果在html属性里class="vm vb"定义的话优先级并不是写在属性里的顺序,而是写在样式里顺序来决定的。如下的例子
<mce:style><!--
.vm{vertical-align:middle} /* 由于位置原因优先于vb*/
.vb{vertical-align:baseline}
--> ......