`
jianzong2000
  • 浏览: 54910 次
  • 性别: Icon_minigender_1
  • 来自: 南京
文章分类
社区版块
存档分类
最新评论

html常用的换行控制

 
阅读更多

text-overflow: clip | ellipsis
clip :  不显示省略标记(...),而是简单的裁切
ellipsis :  当对象内文本溢出时显示省略标记(...)。
需要配合white-space:nowrap使用。为了使 ellipsis 值被应用,此属性必须被设置到具有不可视区域的对象。最好的选择是设置 overflow 属性为 hidden 。设置 overflow 属性为 scroll 或者 auto 时,此属性也会应用。但是会有滚动条出现。

 

white-space : normal | pre | nowrap
设置或检索对象内空格字符的处理方式。

#####normal : 默认。文本自动break。内容拆到下一行,如果超过这个对象的宽度。
nowrap :  强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。

Whitespace, such as line breaks, spaces, and tabs, is collapsed by default in HTML documents。

 

normal 
     A value of normal dictates that sequences of whitespace will collapse into a single space character.

     Line breaks will occur wherever necessary to fill line boxes.
nowrap
     Specifying nowrap ensures that sequences of whitespace will collapse into a single space character,  but line breaks will be suppressed.
pre
     Specifying pre ensures that sequences of whitespace won’t collapse. Lines are only broken at new lines in the markup (or at occurrences of "\a" in generated content).

即normal和nowrap会把4个空格变成一个空格。而pre不会,pre显示原始的内容。

http://reference.sitepoint.com/css/white-space

 


word-break : normal | break-all | keep-all
最常用的控制换行属性,常与word-wrap结合使用。对于中文,应该使用 break-all

normal:默认。允许在词内换行。

break-all:对于亚洲文件和normal相同,然而允许非亚洲文本武断的换行。这个值适用于,亚洲文本中包含一些摘录的非亚洲文本。

keep-all: 不允许亚洲文本词内换行。对非亚洲文件和normal相同。这个值为文本中包含少量的亚洲字符进行优化。


word-wrap : normal | break-word
normal:默认值。允许内容顶开指定的容器边界
break-word:内容将在边界内换行。如果需要,词内换行( word-break )也将发生


你想在限制宽度里仅显示一行文字,而这行文 字的长度却超过这个宽度,结合white-space+text-overflow可以达到更好的效果。

http://www.aspxhome.com/design/css/20097/946816.htm

 

 

分享到:
评论

相关推荐

    html代码实现文字转图片的代码,自动换行

    我们使用了html2canvas库将id为text的div元素转换为canvas元素,并将canvas元素转换为...同时,我们使用了CSS样式控制文字的换行。最后,我们在页面上添加了一个按钮,点击按钮即可将文字转换为图片并显示在页面上。

    CSS 网页内容换行控制

    在进行DivCSS布局时,需要对文本进行控制,我们在jb51.net以前的文章中,也...CSS中控制换行的四种属性。 一、white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果。[code]语法: white-space : normal |

    css控制文字自动换行的实现方法

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-...

    CSS控制文字换行、裁剪

    关于换行、裁剪的一些CSS属性 word-wrap: normal | break-word normal 正常换行,内容可以撑破容器,例如长单词或者长数字的情况break-word 以单词作为换行依据,如果需要,单词内部允许断行 word-break: normal | ...

    CSS控制文本自动换行的问题

    CSS控制文本自动换行的问题 在网页设计中,CSS控制文本自动换行的问题是一个常见的问题,尤其是在使用表格进行网页排版的时候。当我们遇到一段连续的英文词或者一堆感叹号(!!!)时,网页就会被撑开,影响网页的...

    强制换行与强制不换行攻略

    我们一般控制换行所用到的CSS属性一共有三个:word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属性到底是做什么用地: word-wrap语法: word-wrap: ...

    零基础学HTML CSS源代码

    CSS控制DIV.html CSS控制DIV.html DIV+CSS布局.html DIV+CSS布局.html div.css 名为div的样式文件。 style.css 名为style的样式文件。 第15章(源代码\第15章) 示例描述:本章演示...

    Html简介和超链接.ppt

    HTML 是一种标记语言,使用 HTML 标记和元素,可以控制页面和内容的外观,发布联机文档,使用 HTML 文档中插入的链接检索联机信息,创建联机表单,收集用户的信息、执行事务等等,插入动画,开发帮助文件。...

    CSS强制换行对齐的实现方法

    用CSS控制中英文字符强制换行并两端对齐,有效避免DIV的内容超出范围而改变网页布局,强制换行的功能很实用。 复制代码代码如下:<html><head><title>CSS强制换行对齐</title></head>&...

    js实现连续英文字符自动换行兼容ie6 ie7和firefox

    代码如下: irefox中连续英文字符如果要CSS控制强制换行,探索了N久,发现是实现不了的逼不得已的时候就用js脚本进行控制吧 英文字符自动换行,通过js脚本截断字符串,此方法通用ie6,ie7,firefox兼容解决办法 <...

    用CSS控制标题字数

    标题字数不光是程序可以控制,而且也可以用CSS控制,以下是具体写法: CSS------------------ .text{width:180px; overflow:hidden;text-overflow:ellipsis; white-space:nowrap; course:hand; margin:0 auto;} ...

    55种网页小技巧 ---- 下载无需扣分,具有一定收藏价值

    回车键换行.html 在打开的子窗口刷新父窗口的代码里如何写.html 在网页中用按钮来控制前页,后页和主页的显示.html 在规定时间内跳转.html 在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动.html ...

    Html基础知识点.docx

    * 使用 dom 控制样式时的差别:只能使用 link 标签,因为@import 不是 dom 可以控制的 五、Html5 应用程序缓存和浏览器缓存的区别 * 应用程序缓存是 Html5 的重要特性之一,提供了离线使用的功能,让应用程序可以...

    JavaScript完全自学宝典 源代码

    8.11.html 使用writeln()方法生成文本并换行。 第9章(\c09) 示例描述:学习JavaScript中的window对象。 9.1.html 控制状态条信息显示。 9.2.html 框架定义。 9.3.html 框架定义时使用的页面。 ...

    从入门到精通HTML5——PDF——网盘链接

     7.5.1 高度的控制——height 134  7.5.2 行的边框颜色——bordercolor 135  7.5.3 行的背景颜色——bgcolor、background 136  7.5.4 行文字的水平对齐方式——align 137  7.5.5 行文字的垂直对齐方式——...

    HTML5&CSS3网页制作:HTML5段落标记.pptx

    文本控制标记—段落标记 段落标记 01 段落标记 <p></p>是段落标记,主要功能是定义网页中的文本内容,段落标记可以使文本段落上下边距加大。 p是段落标记,主要功能是定义网页中的文本内容。段落标记可以使文本段落...

Global site tag (gtag.js) - Google Analytics