CSS 小结笔记之文字溢出处理

有时文字会溢出盒子，这时一般要对文字进行溢出处理。一般有以下三种处理方法：

1、word-break:normal | break-all |keep-all

　　normal 使用浏览器默认的换行

　　break-all 允许单词内换行即允许单词拆开显示

　　keep-all 不允许拆开单词显示，连字符除外

这种方法只允许英文是使用，对中文无效。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 120px;height: 25px;border: 1px solid red;margin: 100px;}div:first-child {word-break: normal;}div:nth-child(2) {word-break: break-all;}div:last-child {word-break: keep-all;}</style>
</head><body><div>my name is abcd .</div><div>my name is abcd .</div><div>my name is ab-cd .</div>
</body></html>

View Code

结果如下

2、white-space：normal |nowrap

normal正常换行

nowrap 强制同一行内显示所有文本

允许中文

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 120px;height: 25px;border: 1px solid red;margin: 100px;}div:first-child {white-space: normal;}div:last-child {white-space: nowrap;}</style>
</head><body><div>这是一行超级长的文字文字文字</div><div>这是一行超级长的文字文字文字</div></body></html>

View Code

3、text-overflow:clip | ellipsis

clip直接裁剪;

ellipsis 超出的部分用省略号代替;

ellipsis 使用扥前提是

（1）必须让文本先强制一行显示

（2）必须要和overflow搭配使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 120px;height: 25px;border: 1px solid red;margin: 100px;}div:first-child {text-overflow: clip;}div:last-child {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}</style>
</head><body><div>这是一行超级长的文字文字文字</div><div>这是一行超级长的文字文字文字</div></body></html>

View Code

转载于:https://www.cnblogs.com/Assist/p/9639774.html

CSS 小结笔记之文字溢出处理相关推荐

CSS 小结笔记之滑动门技术
所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与s ...
纯CSS的方法解决文字溢出与截断的问题
纯CSS的方法解决文字溢出与截断的问题参考文章: (1)纯CSS的方法解决文字溢出与截断的问题 (2)https://www.cnblogs.com/ilian/archive/2012/06/07 ...
css换行方式和文字溢出
css换行几种方式强制不换行 div{white-space:nowrap; } 自动换行 div{word-wrap:break-word; } 强制英文单词断行 div{word-break:b ...
css实现多行文字溢出隐藏——前端小问题不定时更新
多行文字溢出隐藏,只用一个容器会出现padding部分无法隐藏,出现如下图所示的现象: 解决方法: 内部嵌套一层容器,设置overflow:hidden:即可: 具体代码如下: 转载 ...
CSS 小结笔记之清除浮动
浮动是一个非常好用的属性,但是有时会出现一些问题,需要进行清除浮动.例如 <!DOCTYPE html> <html lang="en"><head& ...
CSS 小结笔记之em
1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的 ...
CSS 小结笔记之伸缩布局 (flex)
CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法--flex(弹性布局). flex 为和模型布局提供了极 ...
CSS学习笔记18——文字图标
字体图标字体图标使用场景:主要用于显示网页中通用.常用的一些小图标. 字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体. 优点: 轻量级:一个图标字体要比一系列的图 ...
CSS 小结笔记之盒子模型
网页标签可以看成是一个个盒子,页面设计就像垒积木一样,在网页中将盒子摆好显示出来.在浏览器中可以很清楚的去看到一个标签的盒子,具体方法如下: 打开浏览器的开发人员工具,在Elements中选中一个标签 ...

CSS 小结笔记之文字溢出处理

CSS 小结笔记之文字溢出处理相关推荐

最新文章

热门文章