CSS之换行
在项目中,常常遇到一些问题,可以通过CSS来快速解决,比如受到布局影响会导致内容溢出,这个时候就可以使用CSS换行解决
自动换行: { word-wrap:break-word; }
强制不换行: { white-space:nowrap; }
允许在英文单词内断行: { word-break:break-all; }
word-wrap: normal (只在允许的断字点处换行)
break-word (允许在长单词或URL内部换行)
white-space: normal (空白会被浏览器忽略)
pre (空白会被浏览器保留)
nowrap (文本不会换行,直到遇见<br />)
pre-wrap (保留空白符序列,但会正常的换行)
pre-line (合并空白符序列,但会保留换行符)
word-break: normal(浏览器默认的换行规则)
break-all (允许在单词内换行)
keep-all(只能在半角空格或连字符处换行)
CSS之换行的更多相关文章
- css文本超出部分省略号&CSS强制换行总结
word-break:break-all单词截断自动换行 word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congra ...
- CSS 段落/换行/缩进
CSS 段落/换行/缩进 1.盒模型 box-sizing: content-box|border-box|inherit; content-box(默认) : 实际宽度/高度 = width/hei ...
- css文本换行相关属性及解释
本文摘自 http://www.wufangbo.com/css-qiang-zhi-huan-hang/ 强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个:word-wr ...
- css 强制换行
强制不换行 div{white-space:nowrap;} 自动换行div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行div{wor ...
- CSS单词换行and断词
背景 某天老板在群里反馈,英文单词为什么被截断了? 很显然,这是我们前端的锅,自行背锅.这个问题太简单了,css里加两行属性,分分钟搞定. 1 2 word–break: keep–all; wo ...
- CSS 强制换行和禁止换行学习
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作 ...
- css文本换行你所不知道的技巧
前言:这是最近翻译的一篇文章 我在header标签开头忘里边加入一个span标签的时候,有一点小问题.我总是想确保在span标签之前能够换行.明确地讲,在标签前边加入<br> 并没有什么错 ...
- css中换行与不换行的样式
常见的css样式分为换行与不换行两种需求 1.不换行显示省略号 text-overflow:ellipsis; white-space:normal; 2.换行自适应 word-break: brea ...
- CSS content换行技术实现字符animation loading效果
一.之前我的字符loading实现 关于字符打点动画实现,我之前使用过box-shadow模拟,还有border+background模拟,还有使用text-shadow实现,以及今年自认为是最好的实 ...
随机推荐
- 如何在for循环中使用多线程
import java.util.concurrent.Executor;import java.util.concurrent.Executors; public class Test {priva ...
- ionic的基础学习(第一篇)
1.ioinc的头部与底部 1.Header 固定在屏幕的顶端的组件,可包含标题,左右的功能按钮.(提供很多颜色的样式,及调用不同的样式名,亦可自定义) bar-light,bar-stable,ba ...
- 3. C++ POD类型
POD全称Plain Old Data,通常用于说明1个类型的属性.通俗的讲,一个类或结构体通过二进制拷贝后还能保持其数据不变,那么它就是一个POD类型. C++11将POD划分为2个基本概念的合集, ...
- C语言 for循环次数
for (i = 0;i < n;i++) 则循环次数是N,而循环结束以后,i的值是n.循环的控制变量i,是选择从0开始还是从1开始,是判断i<n 还是i <= n,对循环的次数,循 ...
- script全局变量
javascript全局变量的生命周期是:直到页面关闭才失效.否则一直有用. 方式1 1 2 var test; var test = 5; 需注意的是该句不能包含在function内,否则是局部变量 ...
- Linq基础知识小记四之操作EF
1.EF简介 EF之于Linq,EF是一种包含Linq功能对象关系映射技术.EF对数据库架构和我们查询的类型进行更好的解耦,使用EF,我们查询的对象不再是C#类,而是更高层的抽象:Entity Dat ...
- java文件上传-原始的Servlet方式
前言: 干了这几个项目,也做过几次文件上传下载,要么是copy项目以前的代码,要么是百度的,虽然做出来了,但学习一下原理弄透彻还是很有必要的.刚出去转了一圈看周围有没有租房的,在北京出去找房子是心里感 ...
- Mysql 5.7版本安装:mysql 服务无法启动。
一.解压文件 下载好MySQL后,解压到D盘下,也可以根据个人喜好解压在其他盘符的路径下,解压后的路径是:D:\mysql-5.7.17-winx64.解压好后不要太兴奋,需要配置默认文件呢! 二. ...
- css 设置滚动条的样式
/*移动端显示滚动条*/ .layui-table-body::-webkit-scrollbar { -webkit-appearance: none; } .layui-table-body::- ...
- Centos 添加用户和用户组
groupadd cheat useradd -g cheat cheat passwd cheat 密码设置jsb_6041