在项目中，常常遇到一些问题，可以通过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之换行的更多相关文章

  1. css文本超出部分省略号&CSS强制换行总结

    word-break:break-all单词截断自动换行 word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congra ...

  2. CSS 段落/换行/缩进

    CSS 段落/换行/缩进 1.盒模型 box-sizing: content-box|border-box|inherit; content-box(默认) : 实际宽度/高度 = width/hei ...

  3. css文本换行相关属性及解释

    本文摘自 http://www.wufangbo.com/css-qiang-zhi-huan-hang/ 强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个:word-wr ...

  4. css 强制换行

    强制不换行 div{white-space:nowrap;} 自动换行div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行div{wor ...

  5. CSS单词换行and断词

    背景 某天老板在群里反馈,英文单词为什么被截断了? 很显然,这是我们前端的锅,自行背锅.这个问题太简单了,css里加两行属性,分分钟搞定.   1 2 word–break: keep–all; wo ...

  6. CSS 强制换行和禁止换行学习

    强制换行       1.word-break: break-all;       只对英文起作用,以字母作为换行依据.       2.word-wrap: break-word;   只对英文起作 ...

  7. css文本换行你所不知道的技巧

    前言:这是最近翻译的一篇文章 我在header标签开头忘里边加入一个span标签的时候,有一点小问题.我总是想确保在span标签之前能够换行.明确地讲,在标签前边加入<br> 并没有什么错 ...

  8. css中换行与不换行的样式

    常见的css样式分为换行与不换行两种需求 1.不换行显示省略号 text-overflow:ellipsis; white-space:normal; 2.换行自适应 word-break: brea ...

  9. CSS content换行技术实现字符animation loading效果

    一.之前我的字符loading实现 关于字符打点动画实现,我之前使用过box-shadow模拟,还有border+background模拟,还有使用text-shadow实现,以及今年自认为是最好的实 ...

随机推荐

  1. Kali Linux信息收集工具全集

    001:0trace.tcptraceroute.traceroute 描述:进行路径枚举时,传统基于ICMP协议的探测工具经常会受到屏蔽,造成探测结果不够全面的问题.与此相对基于TCP协议的探测,则 ...

  2. (转)解锁MySQL备份恢复的4种正确姿势

    本文根据DBAplus社群第104期线上分享整理而成. 原文:http://dbaplus.cn/news-11-1267-1.html 讲师介绍   冯帅 点融网高级DBA 获有Oracle OCM ...

  3. (转)如何修改windows下mysql的字符集

    原文:http://blog.csdn.net/yjz_sdau/article/details/52135050 (1) 最简单的修改方法,就是修改mysql的my.ini文件中的字符集键值, 如 ...

  4. Vue的实时时间转换Demo

    Vue的实时时间转换Demo time.html: <!DOCTYPE html> <html lang="en"> <head> <me ...

  5. css 边框颜色渐变的半圆

    1.需求有这么个东西,个人不习惯背景图片来解决,开始了css尝试. <!DOCTYPE html> <html> <head> <meta charset=& ...

  6. manjaro开启sdd trim

      $ sudo systemctl enable fstrim.timer; $ sudo systemctl start fstrim.service; $ sudo systemctl stat ...

  7. webpack4重新梳理一下

    webpack安装和使用 mkdir webpack_demo cd webpack_demo //npm初始化 npm init //然后一直回车 安装webpack // 不建议全局安装 cnpm ...

  8. 【Express系列】第1篇——项目创建

    安装 node 和 Express 4 node官网:http://nodejs.org/ Express Github:https://github.com/expressjs/express   ...

  9. Go RabbitMQ （一）

    RabbitMQ 简介 RabbitMQ是一个消息代理,用来负责接收和转发消息. 术语 生产者:生产者是负责发送消息的 队列:队列是RabbitMQ用来存储消息的,受主机内存和磁盘大小的限制,本质上是 ...

  10. Maven Source Plugin

    项目pom文件build下添加配置: 01 <plugin> 02 <groupId>org.apache.maven.plugins</groupId> 03 & ...