加上如下的CSS设置,就是设定好宽度width,然后设置合适的word-wrapword-break属性:

.breakAll{
white-space:normal;
word-break:keep-all;
word-wrap: break-word;
}

word-warp 属性设置如何处理单词的折行,可以取的值有ul里面的li折行其实跟其他块状(block)元素的折行都是一样的。以下是相关的CSS属性:

word-wrap: normal | break-word

word-break 属性设置如何处理单词折断,仅支持IE,可以取的值有:

word-break: normal | break-all | hyphenate

white-space 属性设置如何处理元素内的空白。可以取的值有:

white-space: normal | nowarp | pre | pre-line | pre-warp | inherit

经测试对中文也有效。

css让文字,字母折行的更多相关文章

  1. 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法

    文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap;  强制文本不换行 折 ...

  2. 使用css控制文字显示几行并且剩余部分隐藏(移动端和PC端同样适用)

    前言 有些需求需要我们控制一段文本最多显示几行,就像逛淘宝京东的评价楼层一样,有时可能还需要隐藏剩余部分,这样的需求我们怎么来解决呢? 解决办法 我们完全可以使用css来解决这一需求 1. 解决文本显 ...

  3. css让文字显示特定行数,多余的显示省略号

    /*css*/ .p{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** ...

  4. iOS - UIButton折行文字显示设置

    首先在控制器中创建一个button - (void)viewDidLoad { [super viewDidLoad]; UIButton * button = [[UIButton alloc] i ...

  5. span 右浮动折行 解决ie6/7中span右浮动折行问题

    A floated box is shifted to the left or right until its outer edge touches the containing block edge ...

  6. 文字折行不折行 css

    white-space : 1. normal  默认值 ,文字自动换行.               2. pre 使用<pre>标签形式,表示元素.                 * ...

  7. css文字单行/多行超出显示省略号...

    css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...

  8. UIlabel多行文字自动换行 (自动折行)

    UIView *footerView = [[UIView alloc]initWithFrame:CGRectMake(, , , )]; UILabel *label = [[UILabel al ...

  9. 纯css控制文字2行显示多余部分隐藏

    在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-o ...

随机推荐

  1. Timezone offset does not match system offset: 0 != -32400. Please, check your config files

    apscheduler使用uWSGI的mule模块部署的时候报错, 因为系统时区和代码运行时区不一样导致. 解决办法:在初始化的时候指定上海的时区 scheduler = BlockingSchedu ...

  2. 消息服务百科全书——High Availability

    1.1为何需要Replication 在Kafka在0.8以前的版本中,是没有Replication的,一旦某一个Broker宕机,则其上所有的Partition数据都不可被消 费,这与Kafka数据 ...

  3. 牛客 197E 01串

    大意: 给定01串, 单点修改, 询问给定区间$[l,r]$, 假设$[l,r]$从左往右得到的二进制数为$x$, 每次操作增加或减少2的幂, 求最少操作数使得$x$为0. 线段树维护2*2矩阵表示低 ...

  4. Java多线程(八):ReentrantReadWriteLock

    读写锁ReentrantReadWriteLock概述 读写锁ReentrantReadWriteLock,使用它比ReentrantLock效率更高. 读写锁表示两个锁,一个是读操作相关的锁,称为共 ...

  5. Swagger学习(三、配置扫描接口)

    生产环境中使用,发布的时候不能使用

  6. Node.js学习(1)-加载模块require('fs/http/.b/art-template')

    node.js既不是语言,也不是框架,它是一个平台 加载模块: 核心模块(require('fs/http')), 自定义模块(var bExport=require('./b'),exports.f ...

  7. 【Day3】2.re模块使用案例

    课程目标 1.提取 2.匹配 3.替换 1.提取 import re ret = re.findall([正则表达式]) # 返回的类型是列表 2.匹配 import re ret = re.matc ...

  8. QTP10破解步骤(亲试有效)

    QTP10破解步骤: 1.安装qtp,一路默认下来(一定要默认安装目录),一直到要求输入License的界面 2.拷贝mgn-mqt82.exe到C:\Program Files\Mercury In ...

  9. Django项目实战—分页

    自定义分页 未封装版: 优点:直观 缺点:代码乱,不易维护,可拓展性差 data = [] for i in range(1, 302): tmp = {"id": i, &quo ...

  10. 《浏览器工作原理与实践》<07>变量提升:JavaScript代码是按顺序执行的吗?

    讲解完宏观视角下的浏览器后,从这篇文章开始,我们就进入下一个新的模块了,这里我会对 JavaScript 执行原理做深入介绍. 今天在该模块的第一篇文章,我们主要讲解执行上下文相关的内容.那为什么先讲 ...