连续文本CSS处理方法

标签: css | 发表时间:2014-04-09 05:03 | 作者:Jace
出处:http://www.topcss.org

好久没有写博客了,把老文章发出来!

1.问题描述

在宽度有限的情况下,CJK文本和常规西文单词在遇到容器边界时通常会自动换行显示。

image001

图1 文字自动换行(查看 多语种文本自动换行DEMO)

但是长连续文本(如连续字母、连续数字、URL等)会撑破容器在单行内显示,如图2。为了解决这个问题,我们通常会使用样式: word-wrap: break-word(当内容超过容器边界时是否断开转行),效果见图3。

image003

图2 长连续文本撑破容器单行显式

 

image005

图3 长连续文本自动换行(使用word-wrap:break-word 后)

图4显示的是长连续字符与其他常规单词或汉字混排时的表现,这也是测试同事经常用来检测样式表现的用例。通常情况,测试同事会指出连续文本应当紧跟在汉字或短单词的后面显示,即图5显示的效果。为了实现这个效果,我们可以使用 word-break: break-all(控制文本的字内换行行为)来解决,这也是原来的Qzone Feeds中使用的方法。

image007

图4 中文、常规单词与长连续文本混排

 

image009

图5 中文、常规单词与长连续文本混排(使用word-break:break-all 后)

但这会造成展现效果不符合排版规则:

(1)常规单词在不恰当位置断字,如图6。

在行尾的单词由于太长而无法完全放下时,使用了该属性后单词会在行尾的字母处断开,并没有遵循断字规则。不同书写系统的断字规则不尽相同,西文的断字通常是在音节处断字,并在行尾使用连字符连接。如Congratulation的可断字点包括:

Con-grat-u-la-tion

从图6可以看出每行行尾的单词都被非恰当断字,严重影响了内容的连续阅读。

image011

图6 英文单词在非恰当处断字

 

(2)标点符号可能出现在不当位置,影响美观。

前置标点(不允许出现在行末的标点):

$([{£¥•‘“〈《「『【〔〖〝﹙﹛﹝$(.[{£¥

后置标点(不允许出现在行首的标点):

!%),.:;>?]}¢¨°•ˇˉ―‖’”…‰′″›℃∶、。〃〉》」』】〕

〗〞︶︺︾﹀﹄}])!"%'),.:;?)`|)~¢

image013

图7 标点符号不符合排版规则

2.长URL处理

Feed的评论中可能会有链接出现,在去除 word-break:break-all后,文字和url之间可能会出现较大的空隙,如图8。针对这种情况,我们可以只对评论内的url做word-break:break-all处理。

image015

图8 文字与长URL之间有较大间隙

3.结论

为了保证常规文本的阅读体验, 建议对常规文本不使用word-break:break-all,链接特殊处理,将图4的效果视为正常表现。

相关 [连续 文本 css] 推荐:

连续文本CSS处理方法

- - 进步博客
好久没有写博客了,把老文章发出来. 在宽度有限的情况下,CJK文本和常规西文单词在遇到容器边界时通常会自动换行显示. 图1 文字自动换行(查看 多语种文本自动换行DEMO). 但是长连续文本(如连续字母、连续数字、URL等)会撑破容器在单行内显示,如图2. 为了解决这个问题,我们通常会使用样式: word-wrap: break-word(当内容超过容器边界时是否断开转行),效果见图3.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单,也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”,这样您就可以跨站点应用它 — 也就是说,将样式应用到网站,它就会自行应用到每个网页的每个元素. ●XHTML:可扩展 HTML. 对于网站,将数据与设计分离是一个重要的概念:数据使用 (X)HTML 发送到 浏览器,而设计使用 CSS 应用到该数据.

css 圆角

- - CSDN博客推荐文章
作者:kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读:6 评论:0 查看评论.

CSS架构

- - 博客 - 伯乐在线
英文原文: CSS Architecture,编译: CSDN-张红月. Philip Walton 在AppFolio担任前端工程师,他在Santa Barbara on Rails的聚会上提出了CSS架构和一些最佳实践,并且在工作中一直沿用. 擅长CSS的Web开发人员不仅可以从视觉上复制实物原型,还可以用代码进行完美的呈现.

CSS总结

- - CSDN博客Web前端推荐文章
         接触过一段CSS,为简单理解,将CSS说成两步,一步是你做个“记号”,另一步是根据记号设置样式.      网页的内容和样式是分开的. “记号”便是能标识网页中某部分内容的关键字词(选择器),而根据记号设置样式呢,就是按图索骥根据记号设置标识的那部分内容的样式.     这段时间练习的每个CSS小例子,或是用id做记号,或是用name,或是用class,只有有了这些所谓的记号,CSS设定的样式才有用,.

CSS基础

- - CSDN博客Web前端推荐文章
1、引入CSS的四种方式. 行内样式、内嵌样式、链接样式、导入样式. 基本选择器:标签选择器,ID选择器,类选择器,通用选择器. 通用选择器:*{css代码}. 通用选择器作用:对整个网页中所有HTML标签进行样式定义. 常见用法:定义*{margin:0;padding:0}通用样式,并置于CSS文件最顶端,用于对HTML内所有的标签进行重置以保证页面能兼容多种浏览器.

CSS命名规范

- - BlogJava-首页技术区
网上整理的比较好的css命名规则,为css代码的规范化做参考,增加代码的可读性. 容器: container 页头:header 内容:content/container. 页面主体:main 页尾:footer 导航:nav . 侧栏:sidebar 栏目:column 左右中:leftright center .

css基础入门

- - CSDN博客推荐文章
css是Cascading Style Sheets的缩写,是一种用于为Html文档定义布局的样式表语言. Css是一种样式表语言,用于为html定义布局. Css弥补了Html对标记属性控制的不足. Css将网页内容与样式实现分离,使得网页设计更加明了、简洁. Css可以精确控制网页布局,如行间距、字间距、段落缩进和图片定位等.