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实现,以及今年自认为是最好的实 ...
随机推荐
- Spring MVC+MySQL保存中文变成乱码
环境:MySQL,Spring MVC3.2.0,jQuery v2.0.3,使用JdbcTemplate访问数据库,相当于全套Spring解决方案. 现象 直接使用表单POST,或者使用jQuery ...
- 【BZOJ1502】【NOI2005】月下柠檬树 simpson 积分
特别提醒:eps至少要5e-6 首先我们来研究下平行光对投影的影响. 一个二维的图形,若它与光屏平行,那么不论平行光与光屏的夹角为多少,所得图形与原图形全等的(只是位置会有影响) 通过这么一分析,我们 ...
- SVN常用操作介绍
SVN:全称subversion,开源代码版本控制系统,也就是常说的“版本控制工具”,实现代码.文档等的历史版本保存.共享和权限管理.常用于软件开发项目中,开发将最新的代码放到svn,其他同事可在这个 ...
- rabbitmq使用日记
一.安装 添加安装源 #echo 'deb http://www.rabbitmq.com/debian/ testing main' | sudo tee /etc/apt/sources.list ...
- Java之集合(二)ArrayDeque
转载请注明源出处:http://www.cnblogs.com/lighten/p/7283928.html 1.前言 上章讲解了Java中的集合接口和相关实现抽象类,本章开始介绍一些具体的实现类,第 ...
- android studio 3.1.4下载安装配置(附旧版本下载地址)
windows下安装android studio.当前时间2018年9月. 最新版本的android studio3.2.0-release出来了,拥有许多新的特性 可能我是一个业余的android开 ...
- filebeat+ELK日志系统
架构图 filebat logstash elasticsearch 基于elasticsearch6.3.2 elasticsearch(一) 之 elasticsearch初识 elasticse ...
- 在Pycharm中使用AutoPEP8来检验代码的规范性
在学习python的过程中,我们经常会遇到代码不规范而导致的程序报错,代码的规范和严谨就显得尤为重要了,所以编写代码的过程中,我们需要遵循PE8规范,在Pycharm 中我们可以安装插件 AutoPE ...
- sublime text 2+sublimeClang
sublimeClang 是github上面的开源项目,可用于C/C++的自动补全 github:https://github.com/quarnster/SublimeClang 配置sublime ...
- ASP.NET Core 中的实时框架 SingalR
目录 SignalR 是什么? 在 ASP.NET Core 中使用 SignalR 权限验证 横向扩展 源代码 参考 SignalR 是什么? ASP.NET Core SignalR 是一个开源的 ...