在项目中,常常遇到一些问题,可以通过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. day67 crm(4) stark组件的增删改 以及 model_from使用和from组件回顾

        前情提要:Django  stark 组件开发的 增删改,  model_form组件的使用 form组件的回顾 一:list_display_link  创建 功能描述:   使包含的字段能 ...

  2. day 54 linux 常用指令入门

    Linux文件系统结构 Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“盘(C盘.D盘.E盘)”的概念.已经建立文件系统的硬盘分区被挂载到某一个目录下,用户通过操作目录来 ...

  3. Part15 – 前端之jQuery

    本节内容 jQuery 一.jQuery jQuery是对DOM的封装 jQuery 中文在线文档:http://jquery.cuishifeng.cn/ 模块(Python) <--> ...

  4. 【pkuwc2018】 【loj2537】 Minmax DP+线段树合并

    今年年初的时候参加了PKUWC,结果当时这一题想了快$2h$都没有想出来.... 哇我太菜啦.... 昨天突然去搜了下哪里有题,发现$loj$上有于是就去做了下. 结果第一题我5分钟就把所有细节都想好 ...

  5. cat /proc/sys/net/ipv4/ip_forward 0 解决办法

    [root@localhost java]# cat /proc/sys/net/ipv4/ip_forward 出于安全考虑,Linux系统默认是禁止数据包转发的. 所谓转发即当主机拥有多于一块的网 ...

  6. 搭建互联网架构学习--006--duboo准备之zk集群部署安装

    dubbo集群部署安装依赖于zookeeper,所以先安装zookeeper集群. 1.准备三台机器做集群 2.配置 配置java环境  ,2,修改操作系统的/etc/hosts文件,添加IP与主机名 ...

  7. Google Guava--Guava新增集合

    Multiset Multiset 虽然带了个set但是却允许重复元素,与set相同的是不保证元素顺序. 使用场景:获取文章中单词的出现次数 String[] wordArr = new String ...

  8. linux环境下编译C++ 程序

    GCC(GNU Compiler Collection)是Linux下最主要的编译工具,GCC不仅功能非常强大,结构也异常灵活.它可以通过不同的前端模块来支持各种语言,如:Java.Fortran.P ...

  9. 使用DateTime的ParseExact方法实现特殊日期时间的方法详解(转)

    本篇文章是对使用DateTime的ParseExact方法实现特殊日期时间的方法进行了详细的分析介绍,需要的朋友参考下 今天遇到一个特别的需求,需要从下面的字符串中转换成一个DateTime对象: [ ...

  10. 问题集录--Java高级软件工程师面试考纲(转)

    如果要应聘高级开发工程师职务,仅仅懂得Java的基础知识是远远不够的,还必须懂得常用数据结构.算法.网络.操作系统等知识.因此本文不会讲解具体的技术,笔者综合自己应聘各大公司的经历,整理了一份大公司对 ...