分类 : Web前端
css强制换行和超出部分隐藏实现,一、强制换行 1 word-break: break-all; 只对英文起作用,以字母作为换行依据。 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据。 3 white-space: pre-wrap; 只对中文起作用,强制换行。 word-break:break-all 和 word-wrap:brea

一、强制换行
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
例子与上面一样,但区别就是它会把整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉。
显示效果:(就会在div设定的padding内进行填充满,然后切换到下一行)


二、禁止换行

white-space:nowrap 是禁止换行。
overflow:hidden 是让多出的内容隐藏起来,否则多出的内容会撑破容器。
text-overflow:ellipsis 让多出的内容以省略号…来表达。(但是这个属性主要用于IE等浏览器,Opera浏览器用-o-text-overflow:ellipsis; 而Firefox浏览器没有这个功能,多出的内容只能隐藏起来。)


分类: Web前端  发布: 2019-10-31-星期四   访问() .NET技术    Web前端    JAVA开发    语言编程    数据库    电脑知识    代码案例

分类

.NET技术 Web前端 JAVA开发 语言编程 数据库 电脑知识 代码案例

随机阅读

02-标识符,关键字和保留字
【MySQL】漫谈MySQL体系结构
《MySQL 性能优化》之理解 MySQL 体系结构
Python语法的使用和简介
javascript之标识(zhi)符、关键字与保留字
MYSQL性能优化之Mysql体系结构,存储引擎
Unity音量可视化——粒子随声浪跳动
底层剖析 Window 、Activity、 View 三者关系
【MySQL】Merge Index导致死锁
JavaScript中this指向问题

最新

OPPO Reno3 Pro远程守护怎么使用?
XP系统里让IE支持多线程下载怎么设置
qq电脑管家温度检测在哪设置的? QQ电脑管家怎么测电脑的温度
win7禁用ie浏览器方法 win7怎么把桌面的ie隐藏
WinXP笔记本声卡驱动无法成功安装的解决方法
XP⁄Win7共享⁄连接打印机设置详细 xp怎
华为笔记本蓝屏错误0xcoooo428怎么解决
企业如何部署微软Windows 8? Windows 8的开发历史
华为mate9怎样解指纹密码?
什么叫笔记本电脑的芯片级维修?

推荐阅读

c语言中break语句的作用
undefined是什么意思啊
vscode----vue中HTML代码tab键自动补全
前端该怎么学?推荐一个学习路线!
.Net轻松处理亿级数据--ClickHouse数据操作
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
html5中datalist标签怎么用
DIV CSS字体(font-family)实现字体样式设置
Mysql里表示布尔型的类型是什么
Datalist options 集合,options语法,optio

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16