html title自动换行,css控制文字自动换行的实现方法
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法
对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义
css
CSS Code复制内容到剪贴板
#wrap{whitewhite-space:normal;width:200px; }
1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
CSS Code复制内容到剪贴板
#wrap{word-break:break-all;width:200px;}
或者
CSS Code复制内容到剪贴板
#wrap{word-wrap:break-word;width:200px;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
效果:可以实现换行
2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
CSS Code复制内容到剪贴板
#wrap
{word-break:break-all;width:200px;overflow:auto;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
效果:容器正常,内容隐藏
对于table
1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏
XML/HTML Code复制内容到剪贴板
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
效果:隐藏多余内容
2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行
XML/HTML Code复制内容到剪贴板
abcdefghigklmnopqrstuvwxyz 1234567890
abcdefghigklmnopqrstuvwxyz 1234567890
效果:可以换行
3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法
4.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用
XML/HTML Code复制内容到剪贴板
abcdefghigklmnopqrstuvwxyz1234567890
abcdefghigklmnopqrstuvwxyz1234567890
效果:隐藏多于内容
5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法
运行代码框
最后,这种现象出现的几率很小,但是不能排除网友的恶搞。如果
有什么问题请到在下面留言
下面是提到的例子的效果
XML/HTML Code复制内容到剪贴板
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
字符换行
table,td,th,div { border:1px green solid;}
code { font-family:"Courier New", Courier, monospace;}
div
All white-space:normal;
Wordwrap still occurs in a td element that
has its WIDTH attribute set to a value smaller than the unwrapped content of the cell,
even if the noWrap property is set to true. Therefore, the WIDTH attribute takes
precedence over the noWrap property in this scenario
html title自动换行,css控制文字自动换行的实现方法相关推荐
- html怎样让文字自动换行,css中文字自动换行如何实现
css中文字自动换行如何实现 在div css布局中,遇到连续英文字母或连续数字在div.p.h2.h1等盒子里排成一排显示不会自动随盒子宽度限制而自动换行. 当然中文字在DIV或任意盒子中均会自动换 ...
- css控制文字自动换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换 行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素 ...
- html字体变大自动换行,css 实现文字自动换行切同行元素高度自适应
1.实现div行内布局所有行跟随最大高度自适应 html代码样例: 所在部门 @ViewBag.decideDetail.departName 岗位 @ViewBag.decideDetail.pos ...
- 纯css控制文字显示隐藏
纯css控制文字显示隐藏 用到css 伪类 :checked :checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框). html <div class=" ...
- CSS控制文字的一些基本属性的使用
CSS控制文字的一些基本属性的使用: 一.CSS控制段落: 段落缩进:text-indent:20px; 文字方向:text-align:center; 文字修饰:text-decoration:un ...
- css 控制文字左右对齐
css 控制文字左右对齐: <p class="center">我是两端对齐文字端对齐文字<span></span></p> .ce ...
- css文字定位最右边,CSS 控制文字定位
CSS 控制文字定位 作者:不详 来源: 日期:2002-8-5 [code] P.double {line-height: 2} P.right {text-align: right} P.cent ...
- 在div中使用css让文字底部对齐的方法
2019独角兽企业重金招聘Python工程师标准>>> css对文字的布局上没有靠容器底部对齐的参数,不过我们可以使用position的相对和绝对定位功能轻松实现文字靠近div底部对 ...
- php css下划线,css下划线如何设置?css设置文字下划线的方法介绍
在网页中默认情况下文字字体是没有下划线样式的,但是有时候我们在网页中会看到不是链接的文字下面会有一行下划线,那么这个下划线样式是怎么实现的呢?本篇文章就来给大家介绍一下css设置文字下划线的方法,接下 ...
最新文章
- docker 安装使用 solr
- 0x33.数学 - 同余
- mysql+spring+mybatis实现数据库读写分离[代码配置] .
- Spring Boot 内置Tomcat——IntelliJ IDEA中配置模块目录设为文档根目录(DocumentRoot)解决方案
- Django 多数据库联用(看着不错还有源码可以下载)
- oracle 10g express linux,在Ubuntu下安装Oracle Database 10g Express Edition
- 第三章 游戏软件工程基础
- 【学习笔记】在KEIL中stm32移植51代码时位定义变量的替换
- 经典有源滤波电路(赛伦-凯滤波器)
- 人工智能和网络安全,一场正发生的挑战
- layui导入模板数据_使用layui模板填充页面数据
- 285个地级市的灯光数据(1992-2013年)和雾霾(PM2.5)数据(1998-2016年)
- 【动态更新】解决夫妻两地分居手续
- [RK3288]PMU配置(RK808)【转】
- 吐血推荐 ▏看完这个我才知道原来PHP应该这样学!大牛的成功是可以复制的(福利派送)
- 厉害了隔壁老王,带你入坑腾讯联机对战引擎!
- 详解视频封装格式之MP4
- EventBus基础
- lisp 非对称缓和曲线_非对称缓和曲线放样计算程序清单(for Casio-fx4850)
- web HTML5新标签对IE低版本浏览器的兼容处理