0 Comments

CSS网页布局中文字排版九大技巧(3)

发布于:2013-05-10  |   作者:广州网站建设  |   已聚集:人围观

七、固定宽度汉字截断:使用text-overflow(显示省略号效果)

用后台语言可以对从数据库里的字段内容做截断处理,比如说截12个汉字(之后用省略号)。但是有时还需要html标签的过滤等,而用CSS来控制则没有这个问题。比如对列表应用以下样式:

ExampleSourceCode

广州网站建设,网站建设,广州网页设计,广州网站设计
  1. li{  
  2. overflow:hidden;  
  3. text-overflow:ellipsis;  
  4. white-space:nowrap;  
  5. }  
  6.  

八、固定宽度汉字(词)折行:使用word-break

举个例子,比如说要在一个固定宽度容器里面显示很多地名(假设以空格分隔),为了避免地名中间断开(即一个字在上面而另一个字折断到下一行去了)。则可以使用word-break。比如:

ExampleSourceCode 


  1. <divstyledivstyle="width:210px;height:200px;background:#ccc;  
  2. word-break:keep-all"> 
  3. 南京上海上海上南上海南京上海南京上海上海南京上海上海  
  4. div> 

九、汉字注音:使用ruby标签和ruby-align属性

比如说注音zhuyin,可以利用ruby-align设置对齐方式。这是在CSS手册里面看到的,具体可以自行查阅ruby-align项。

广州网站建设,网站建设,广州网页设计,广州网站设计

标签:
飞机