css换行和超出隐藏
一、强制换行
1 word-break: break-all; 只对英文起作用,以字母作为换行依据。
2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据。
3 white-space: pre-wrap; 只对中文起作用,强制换行。
word-break:break-all 和 word-wrap:break-word 都是能使其容器如DIV的内容自动换行,它们的区别在于:
1、word-break:break-all
假设div宽度为450px,它的内容就会到450px自动换行,如果该行末端有个很长的英文单词,它会把单词截断,一部分保持在行尾,另一部分换到下一行。
2、word-wrap:break-word
例子与上面一样,但区别就是它会把整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉。
二、禁止换行
1 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; 是禁止换行。
overflow:hidden; 是让多出的内容隐藏起来,否则多出的内容会撑破容器。
text-overflow:ellipsis; 让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器,Opera浏览器用-o-text-overflow:ellipsis; 而Firefox浏览器没有这个功能,多出的内容只能隐藏起来。
css换行和超出隐藏的更多相关文章
- css强制换行和超出隐藏实现
一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 ...
- css样式之超出隐藏
文本超出部分隐藏,总结两种方法. 1.单行隐藏 html代码 <div class="mi">当文字超过范围的时候,超出部分会隐藏起来.</div> css ...
- CSS实现不换行/自动换行/文本超出隐藏显示省略号
在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...
- CSS 超出隐藏问题
.dropdown-navbar>li:last-child>a { border-bottom: 0 solid #DDD; border-top: 1px dotted transpa ...
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- CSS控制Span强制换行、溢出隐藏
CSS控制Span强制换行 word-wrap: break-word; word-break: break-all; white-space: pre-wrap !important; 盒子文字设置 ...
- css实现中文换行,英文换行,超出省略
英文换行时,是以单词换行,在对应的标签添加对应的属性即可 1 word-break:break-all;只对英文起作用,以字母作为换行依据 2 word-wrap:break-word; 只对英文起作 ...
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- css文本超出隐藏 显示三个点
文本超出显示三个点一般分两种情况 一,单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二,多行文本超出隐藏 ...
随机推荐
- 【百度地图API】如何制作泡泡放大镜?
原文:[百度地图API]如何制作泡泡放大镜? 任务描述: 我不喜欢API提供的缩放控件耶…… 我能不能使用其他方式放大地图勒? 当然阔以啦! 现在就来教大家如何动手制作一个可爱的泡泡放大镜! 使用它, ...
- php传引用和全局变量
原文:php传引用和全局变量 <?php /* * 函数内部改变变量的值两种方法 */ $a = 10; /* *方法一 :函数参数传引用 */ function methodOne(& ...
- 使用Vs2005打造简单分页浏览器(1)原创
原文:使用Vs2005打造简单分页浏览器(1)原创 使用Vs2005打造简单分页浏览器(1)原创1引言2功能3实现过程以及关键点4总结5不足之处6其他7 代码下载 1 引言很早就有搞一个浏览器的 ...
- Linux MySQL自己环境搭建的笔记
cd /usr/share/selinuxsetenforce 0tar -xvf MySQL-5.6.12-1.el6.x86_64.rpm-bundle.tarrpm -qa|grep -i my ...
- server正式的环境性能测试nginx-php 指着寻求突破的表现
因为我是第三级城市语言.无法接触到更牛接触逼公司或环境.这是你母亲的现场环境摸过几次.截至完毕,测试已设法提高空间. 公司须要的站点执行环境.不能由于我这边的瓶颈而阻碍了公司进行,希望各位大能能不吝惜 ...
- Java Persistence with MyBatis 3(中国版) 第五章 与Spring集成
MyBatis-Spring它是MyBatis子模块框.它用来提供流行的依赖注入框架Spring无缝集成. Spring框架是一个基于依赖注入(Dependency Injection)和面向切面编程 ...
- Oracle 跨库 查询 复制表数据 分布式查询
方法一: 在眼下绝大部分数据库有分布式查询的须要.以下简单的介绍怎样在oracle中配置实现跨库訪问. 比方如今有2个数据库服务器,安装了2个数据库.数据库server A和B.如今来实如今A库中訪问 ...
- 用Inno Setup制作WEB程序安装包
原文 用Inno Setup制作WEB程序安装包 最近做了一个WEB程序的安装包,我把制作的过程做个介绍,贴出源码给大家做个参考 看看inno 的脚本 [Setup] AppCopyright=tes ...
- .net中,控件(Name)属性或ID属性的常见命名规则
控件名称 缩写 介绍 公共控件 Button btn 按钮 CheckBox chk 复选框 CheckedListBox ckl 显示一个项列表,其中每一项左侧都有一个复选框 ComboBox ...
- TableLayout中怎么填充相同的布局
在Android界面xml文件中可以导入另一个xml文件,就能实现一个功能就是重复利用相同的xml布局 有两种方法进行处理: include引入 定义一个布局Tab_flag.xml <?xml ...