在项目中,常常遇到一些问题,可以通过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. JS-DOM Element方法和属性

    JS-DOM Element方法和属性 S-DOM Element方法和属性一,获取html元素1.getElementByID(id)通过对元素的ID访问,这是DOM一个基础的访问页面元素的方法.e ...

  2. 直接访问实例变量 VS 通过点语法访问实例变量

    直接访问实例变量,不会经过 OC 的方法派发机制,速度比较块.会直接访问对象的实例变量对应的内存. 直接访问实例变量,不会调用"设置方法".绕过了相关属性对应的"内存管理 ...

  3. iOS-Button图片和文字垂直居中【按钮图片和文字同时居中】

    以前不怎么有这样的需求,最近开发经常用到,所以就干脆封装一个这样的 Button 让图片和字体都垂直居中,重写layoutSubviews方法,来实现就可以,至于 layoutSubviews 方法什 ...

  4. 汉诺塔问题(C++版)

    题目描述 Description 约19世纪末,在欧州的商店中出售一种智力玩具,在一块铜板上有三根杆,最左边的杆上自上而下.由小到大顺序串着由64个圆盘构成的塔.目的是将最左边杆上的盘全部移到中间的杆 ...

  5. 【BZOJ3217】ALOEXT 分块

    题目传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3217 分块过掉辣!!!!!!$O(n^{1.5}+q\times \sqrt{n})$的 ...

  6. leetcode 114. 二叉树展开为链表(Flatten Binary Tree to Linked List)

    目录 题目描述: 示例: 解法: 题目描述: 给定一个二叉树,原地将它展开为链表. 示例: 给定二叉树 1 / \ 2 5 / \ \ 3 4 6 将其展开为: 1 \ 2 \ 3 \ 4 \ 5 \ ...

  7. linux把程序添加到全局环境变量

    比如把, nginx服务放到全局变量 ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/ /usr/local/bin/就是环境变量目录

  8. echart 饼图数据为0不显示或者太小显示其他的解决办法

    饼图数据为0或者太小显示如下,不美观 解决办法: 为0的去掉,小于0.005的累加起来 方法 function getsData(_rowData){ var rowData=JSON.parse(J ...

  9. Go语言学习笔记十二: 范围(Range)

    Go语言学习笔记十二: 范围(Range) rang这个关键字主要用来遍历数组,切片,通道或Map.在数组和切片中返回索引值,在Map中返回key. 这个特别像python的方式.不过写法上比较怪异使 ...

  10. mysql预编译

    一.背景: 用Mybatis+mysql的架构做开发,大家都知道,Mybatis内置参数,形如#{xxx}的,均采用了sql预编译的形式,举例如下: <select id=”aaa” param ...