上图代码:
li { display: inline }
a { padding: 0 1.2em }
案例分析:上图采用了大家常用的列表来排版文本。只需要把 li
的显示属性设为行内,就可以达到自动换行。但是这样会有一点小瑕疵。不知大家注意到没,本来标签a有左右padding,第二行确是顶头显示。由于这是一
个链接被分行了,显示并没错,但显示效果并不够完美。 继续往下看
上图有个小瑕疵,就是歌手名被分行,会给浏览者带来不愉快的感觉。这时候我们需要把每个歌手看做整体,并强制文字在这个整体中不换行,而是让这个块状的整体自动换行,如下图。
这样看起来美观过了,是怎么做到的呢,看下代码:
li { display:inline; float:left}
a { padding: 0 1.2em; display: block; white-space:nowrap}
代码解释:display:inline意图在于消除IE6双倍margin的bug,white-space:nowrap忽略所有空格回车等元素,目的是强制“文字在该块里”不换行。如果不强制换行,当宽度不合适时就会出现下图症状。
除此之外,还有其他解决方案,比如让上面的 【a】也浮动,这样它的宽度,就变成自适应。
总结:
对于同样的效果,通过CSS可以有很多种实现方法,到底哪种更优秀,需要长时间经验积累。
下一篇我正在策划“CSS系统布局和排版”,意思就是站在整个网站层面上,统一布局,而不单是针对一个页面。
为什么有这个打算。现在很多站,尤其是CMS建起来的,往往页面优化不够,造成浏览速度不够快。很多站长抱怨空间速度不行,想花大价钱买好空间。其实完全可以从页面优化入手。
分享到:
相关推荐
c# winform 绘制多行文本:自动换行:文本c# winform 绘制多行文本:自动换行:文本c# winform 绘制多行文本:自动换行:文本c# winform 绘制多行文本:自动换行:文本c# winform 绘制多行文本:自动换行:文本c# winform 绘制...
C# 字符串多行显示、文本换行以textbox为例讲为大家详细介绍并附演示效果图及演示代码,感兴趣的朋友可以了解下,或许对你学习字符串换行有所帮助
listView实现文字编辑的自动换行.
arcgis api 3.x for js 解决 textSymbol 文本换行显示源码,arcgis api 3.x for js 默认加载 textsymbol 显示文本是不支持换行的,识别不到 \n \r 等等转义符,需要拓展一下才能支持。 适合对象:webgis初学者以及...
Win32 EditControl多行文本框自动换行,并在添加新行时自动将光标移到末尾
图片和textview并排,图片最前或最后的简单解决方案
VTK 多行文本 此示例演示如何使用 vtkTextMapper 的多行 2D 文本。它显示了几个理由以及单行和多行文本输入。 完整可编译运行的实例
文本内容较多时,展示需要特殊处理。可折叠,可展开。细节处理优化~
对文本字符进行批量多行替换,任何文本首尾处添加注释。 《多行字符批量替换注释专家》使用方法: 1、选择处理目录 2、选择欲处理文件的后缀 3、填写欲替换的内容 4、点【开始批量处理】按钮就可进行批量替换! ...
多行文本替换工具多行文本替换工具
易语言多行多文本分割源码。本为价格计算工具。代码完全可用,无模块。
可多行的RadioGroup控件。内有完整的代码,可放到项目里面运行。
多看代码有利于进步,去掉里面冗余的代码,真是,现在年轻人写的都什么玩意。
系统自带的label不能自动换行,使用较不便,因此写了这个程序,实现了label的自动换行,其中有例子,在此与大家分享
JSP用中收集数据:javascript 实现输入多行动态输入 在网上找了一下,只有一篇此类文章,还是PHP的,害得我要特意去看一下PHP,感觉很不好,是一种弱类型的语言,可以不声明就使用,因此,还要在每个变量前加$.不知道那些...
易语言屏蔽回车键源码,屏蔽回车键
多行文本批量替换,可对文本文件进行多行复制替换,方便,快捷,极为好用!!
有时会需要让字符串多行显示,且每行显示特定的个数的字符串,本程序可以实现以上功能,比如每行固定显示5个字符。。。