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>
结果如下
<!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>
<!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>
CSS 小结笔记之文字溢出处理的更多相关文章
- CSS 小结笔记之浮动
在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...
- CSS 小结笔记之解决flex布局边框对不齐
在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...
- css+div如何解决文字溢出
看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...
- CSS 小结笔记之图标字体(IconFont)
本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...
- CSS 小结笔记之em
1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的 ...
- CSS 小结笔记之伸缩布局 (flex)
CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...
- CSS 小结笔记之清除浮动
浮动是一个非常好用的属性,但是有时会出现一些问题,需要进行清除浮动.例如 <!DOCTYPE html> <html lang="en"> <head ...
- css如何简单设置文字溢出盒子显示省略号
1.单行文本溢出显示省略号单行文本溢出显示省略号,必须满足三个条件:(1)先强制一行内显示文本white-space:nowrap;(默认 normal自动换行)(2)超出的部分隐藏overflow: ...
- CSS 小结笔记之BFC
BFC 即为Block formatting context 的缩写,BFC 主要用来将一个盒子设置为一个隔离的容器,不管盒子内部的元素具有什么属性,都不会影响到盒子的外面. 1.哪些元素能产生BFC ...
随机推荐
- (转)AIX rootvg 镜像创建与磁盘更换
# prtconf | grep disk # chdev -l hdisk1 -a pv=yes # extendvg rootvg hdisk1 # chvg -Qn rootvg # lsvg ...
- 搭建互联网架构学习--005--框架初步拆分ssm单一框架
经过前边的准备步骤,服务器基本搭建完毕,接下来就开始一步步搭建框架了. 拆分单一结构:拆分的目的是为下一步引入dubbo做准备的. 把下边这个单一maven框架进行拆分 这个就是一个简单的maven项 ...
- SQL Function 自定义函数
目录 产生背景(已经有了存储过程,为什么还要使用自定义函数) 发展历史 构成 使用方法 适用范围 注意事项 疑问 内容 产生背景(已经有了存储过程,为什么还要使用自定义函数) 与存储过程的区别(存 ...
- Chapter 3 Phenomenon——8
I turned to sit up, and this time he let me, releasing his hold around my waist and sliding as far f ...
- java学习-sha1散列算法
直接调用HashKit.sha1(String str)方法就可以了,,返回的是16进制的字符串长度是40, 也就是用md.digest()方法解析出来的字节数是160字节长度. 而MD5散列算法生成 ...
- 面试:http协议
转自:http://www.cnblogs.com/ranyonsue/p/5984001.html#undefined HTTP简介 HTTP协议是Hyper Text Transfer Proto ...
- 鹅厂优文 | ReactJS一点通
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂新鲜事儿发表于云+社区专栏 作者:卢文喆 腾讯云 UI工程师 导语 | 当React 刚开始红的时候,一直觉得 JSX 的设计思想 ...
- DirectorySearcher.Filter 属性(转)
获取或设置一个值,该值的轻型目录访问协议 (LDAP) 格式筛选器字符串. 更多信息见:http://www.cnblogs.com/zhongweiv/archive/2013/01/05/ad_s ...
- UIKit 框架之UITableView二
// // ViewController.m // UITableView // // Created by City--Online on 15/5/21. // Copyright (c) 201 ...
- C#byte类型
byte类型的范围是0~255转换为二进制是00000000~11111111 ---------------------------------------------------------- C ...