在项目中,常常遇到一些问题,可以通过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. 纯css实现不固定行数的文本在一个容器内垂直居中

    项目中要实现的效果如图: html代码 及 css代码: <!DOCTYPE html> <html> <head> <meta charset=" ...

  2. 贪吃蛇小游戏-----C语言实现

    1.分析 众所周知,贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本,既简单又耐玩.该游戏通过控制蛇头方向吃食物,从而使得蛇变得越来越长,蛇不能撞墙,也不能装到自己,否则游戏结束.玩过贪吃蛇的 ...

  3. POJ 1101

    #include <iostream> #include <string> #define MAXN 78 #define min _min #define inf 12345 ...

  4. (转)测试rootvg卷组的镜像的官方做法

    测试rootvg卷组的镜像的官方做法 这篇文档介绍了测试rootvg卷组镜像的方法,此文档仅使用于带有热插拔硬盘的pSeries服务器.由于rootvg卷组包含有AIX操作系统,在做卷组镜像配置上比非 ...

  5. Spring Security构建Rest服务-1401-权限表达式

    Spring Security 的权限表达式 用法,在自定义的BrowserSecurityConfig extends WebSecurityConfigurerAdapter 配置文件里,每一个a ...

  6. Spring Security构建Rest服务-0300-Restful API异常处理

    SpringBoot默认的错误处理机制: 一.测试需要的部分代码 (完整代码放在了github https://github.com/lhy1234/spring-security): UserCon ...

  7. android 使用lint + studio ,排查客户端无用string,drawable,layout资源

    在项目中点击右键(或者菜单中的Analyze),在出现的右键菜单中有“Analyze” --> “run inspaction by Name ...”.在弹出的搜索窗口中输入想执行的检查类型, ...

  8. C/C++ -- Gui编程 -- Qt库的使用 -- 对话框QDialog

    模态对话框 -----源文件main.cpp(工程QtDialog)----- #include "qtdialog.h" #include <QApplication> ...

  9. flask小demo-数据查询

    mysqlconn-flask.py # -*- coding: utf-8 -*- #coding=utf-8 import os import mysql.connector from flask ...

  10. kmean算法C++实现

    kmean均值算法是一种最常见的聚类算法.算法实现简单,效果也比较好.kmean算法把n个对象划分成指定的k个簇,每个簇中所有对象的均值的平均值为该簇的聚点(中心). k均值算法有如下五个步骤: 随机 ...