易截截图软件、单文件、免安装、纯绿色、仅160KB

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盒模型详细讲解

CSS 盒模型
  网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的,请看下图:
  
  如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿),就会很熟悉下面的图表了。
  这个图表很好地展示了作用于页面上任意盒子的数值。
  
  注意以上两个例子中,margi ......

8个不兼容IE 8的CSS样式写法


Internet Explorer 8预设是以CSS 2.1为标准,并修正了许多Internet Explorer 7的CSS Bug,这意味着有一部份以往依据IE 7所设计的网页,
在IE 8上的呈现会有所出入,所幸拜IE 7相容检视功能所赐,目前因使用IE 8而导致版面错误的网站并不多。
但一值依赖IE 7相容检视功能并非长久之计,尽早将网站修改为IE 8相容才是长久 ......

大学毕业设计C#、winfrom、.net、html、div+css代做

还在为毕业设计而烦恼么 看看这里 我帮你搞定就好
本人实际开发经验丰富 学过各类程序编写 前后台都可以
现在的工作不怎么景气呀 所以找点外快养家糊口呀 呵呵
报酬嘛 过得去就行了 没什么要求 交个朋友嘛
如果有意者可与本人联系qq604884385 Tel13438309220 ......

常用Css样式

/*标题元素*/
h1,h2,h3,h4,h5,h6 {
  color: green;
  }
/*父元素继承*/
body {
     font-family: Verdana, sans-serif;
     }
/*id 选择器*/
#red {color:red;}
/*id 选择器和派生选择器*/
#red p {
font-style: italic;
text-align: right;
margin ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号