利用 CSS 控制 DIV 块中内容强制换行。先来看下示例:
一、未加CSS控制情况:
<div style="width:30%;">
<!--数字串-->
186608752,186608932,186610076,186600607,186576340,186576338,186610806,186610424,186586705,22833794,150555535,150634343,153999301,186610076,186600607,186576340,186576338,186610806,186610424,186586705,22833794,150555535,150634343,153999301
<br/><br/>
<!--英文串-->
break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text.This value is suited to Asian text that contains some excerpts of non-Asian text.keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.
<br/><br/>
<!--中英文混排串-->
测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content
</div>
页面显示效果如下:
二、加CSS控制情况:
<div style="width:30%;word-wrap:break-word;overflow:hidden;">
<!--数字串-->
186608752,186608932,186610076,186600607,186576340,186576338,186610806,186610424,186586705,22833794,150555535,150634343,153999301,186610076,186600607,186576340,186576338,186610806,186610424,186586705,22833794,150555535,150634343,153999301
<br/><br/>
<!--英文串-->
break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text.This value is suited to Asian text that contains some excerpts of non-Asian text.keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.
<br/><br/>
<!--中英文混排串-->
测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content
</div>
显示效果如下:
CSS:
word-wrap:break-word;overflow:hidden;
word-wrap:控制换行,当break-word时,是强制换行;
与 break-word 不同,是控制是否断词的。
overflow 属性规定当内容溢出元素框时发生的事情,当 hidden时,内容会被修剪,并且其余内容是不可见的。
- 大小: 53.4 KB
- 大小: 33.8 KB
分享到:
相关推荐
对于div 1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。 #wrap{white-space:normal; width:200px; } 或者 #wrap{word-break:break-all;width:200px;} eg. <div id=wrap>ddd...
简单版本,可换行,可在线书写,条纹非背景图,可控制行高,主要运用css样式contenteditable、background
设置div内单行文本截断,文本截断,下载文件内含 关键css和属性解析地址
<div>......</div>列块容器 标题<h#>..........</h#> #=1~6;h1为最大字,h6为最小字 段落************* 链接…… 图像 注释<!--..........--> 平行线<hr /> 用于分割内容 换行 <br /> html样式
通过Div+CSS 结合Jquery制作的具有左侧菜单、导航菜单、下拉菜单、自动适应窗口大小、自动控制iframe高度,动态修改CSS样式,利用CSS的expression表达式,自动调整div大小,实现div左侧跟随的诸多布局应用。
1、itext将静态html转pdf中文显示及换行问题 2、itext将静态html转pdf 字体问题 3、html转pdf 参考我的另外一篇博文https://blog.csdn.net/qq_38616723/article/details/125188407?spm=1001.2014.3001.5502
我们使用了html2canvas库将id为text的div元素转换为canvas元素,并将canvas元素转换为...同时,我们使用了CSS样式控制文字的换行。最后,我们在页面上添加了一个按钮,点击按钮即可将文字转换为图片并显示在页面上。
1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能灵活使用 CSS排版 能力目标 学会使用 CSS制作电子相册 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结 <div>...
大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是 CSS如何将他们换行的方法! 对于div 1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。 #wrap{...
而为了限制文本显示的范围,一般使用div+css设定自动换行或缩略等样式。对于未知的文本格式,如果要求文本单行过长时换行显示,并且保留原文本的空格和换行符,就可以通过div+pre标签的组合,再分别设定各自的样式来...
span标记的样式设定width属性,会发现不会产生效果。 如果设置display:block,width属性生效,但是此时的span跟div一样了。 如果设置display:inline-block,则span并列在同行,而且width属性生效。 元素display...
可以通过 div的 class 或 id 应用额外的样式。 (2)不必为每一个 div都加上类或 id。 (3)可以对同一个 div 元素应用class或id属性,但常见的情况是只应用其中一种。 特点: div标记 示例: <div id = " text">...
style1.css 名为style1的CSS样式文件。 style2.css 名为style2的CSS样式文件。 style3.css 名为style3的CSS样式文件。 第16章(源代码\第16章) 示例描述:本章演示字体属性用法。 间距与间隔....
在CSS中,我们可以通过下面的样式实现DIV元素中文本超长后自动截断并以省略号结尾: 复制代码代码如下: overflow: hidden; word-break: normal; text-overflow: ellipsis; text-overflow: ellipsis是实现文本截断...
以前用表格排版,一般都是用不规则的背景图片,跨单元格来做一些不规则的效果.css+div的特点就是格式和样式分开.2.css+div还是用块的行使排版比较好,页面简单,直观,不那么花哨.源码的结构也简单,页面执行效率高.3.尽量...
当然我们还需要一个CSS文件去控制span的样式: 复制代码代码如下: .portlet span { float:right } 这个时候就发现出现一个问题“文章”跟“编辑”不在同一行中!这下苦闷了!于是只好去搜了问题原因如下
对于div1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。 复制代码代码如下:#wrap{white-space:normal; width:200px; } 或者 复制代码代码如下:#wrap{word-break:break-all;width:...
标记中<td xss=removed> 这句话的意思就是将单元格的内容自动换行 主要样式word-wrap:break-word 控制大图片的网页宽度 复制代码代码如下: .div1{margin: auto;width: 600px;} .div1 img{max-wi
语义化标签:段落标签,标签自定义文字样式,标题标签,<div>块,标签定义头部,标签定义底部,标签定义正文区段,标签定义侧边栏区域; 效果标签: 标签实现换行效果,特殊字符 实现空格效果,标签实现...