在项目中,常常遇到一些问题,可以通过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. 五:MyBatis学习总结(五)——实现关联表查询

    一.一对一关联 1.1.提出需求 根据班级id查询班级信息(带老师的信息) 1.2.创建表和数据 创建一张教师表和班级表,这里我们假设一个老师只负责教一个班,那么老师和班级之间的关系就是一种一对一的关 ...

  2. 【NOIP2013】 华容道 bfs预处理+bfs

    这一题我们考虑一个最裸的算法: 我们设$dp[i][j][k][l]$表示当前棋子在$(i,j)$且空格在$(k,l)$时的最小步数 然后显然随便转移一下就好了,时间复杂度为$O(q(nm)^2)$. ...

  3. 二叉排序树的理解和实现(Java)

    二叉排序树的定义和性质 二叉排序树又称二叉排序树.它或者是一个空树,或者是一个具有下列性质的二叉树: 若它的左子树不空,则左子树上所有节点的值均小于它的根结构的值 若它的右子树不空,则右子树上所有结点 ...

  4. LFR benchmark graphs 人工网络生成程序

    人工网络生成程序,可在CSDN上免费下载 或者科学网这边也可以下载 参数 • n: number of vertices;• k: average degree;• maxk: maximum deg ...

  5. Codeforces Round #555 (Div. 3) c2 d e f

    c2:Increasing Subsequence (hard version) 那边小取那边,然后相等比较后面的长度 #include<bits/stdc++.h> using name ...

  6. Java之集合(二十二)PriorityBlockingQueue

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7510799.html 1.前言 本章介绍阻塞队列PriorityBlockingQueue.这是一个无界有序的阻 ...

  7. ubuntu 下 重启 mongo 后 遇到蛋疼问题。

    以后,切忌 mongo 正常关闭后 ,再重启ubuntu. 否则后果这是很严重. 2014.8.6日 PM 6点. 网站莫名打不开了,全部是空白,又是老问题. 幸亏 及时发现,那就重启下. 蛋疼,重启 ...

  8. Java虚拟机(四):JVM类加载机制

    1.什么是类的加载 类的加载指的是将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法区内,然后在堆区创建一个java.lang.Class对象,用来封装类在方法区内的数据结构 ...

  9. python笔记07-----打包模块(shutil,zipfile,tarfile)

    1.shutil模块 复制删除 import shutil shutil.copy('filename', 'test2') # copy方法 f1 = open('filename',encodin ...

  10. 机器学习--Gradient Boosting Machine(GBM)调参方法详解

    一.GBM参数 总的来说GBM的参数可以被归为三类: 树参数:调节模型中每个决策树的性质 Boosting参数:调节模型中boosting的操作 其他模型参数:调节模型总体的各项运作 1.树参数 现在 ...