加上如下的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. 适合新手的160个creakme(一)

    先跑一下 直接使用这个字符串去check,发现提示信息有关键字符串 CODE:0042FB80 00000021 C Sorry , The serial is incorect ! 找到这个字符串的 ...

  2. TCP协议探究(四):定时器

    1 概述 重传定时器:使用于当希望收到另一端的确认. 坚持(persist)定时器:使窗口大小信息保持不断流动,即使另一端关闭了其接收窗口 保活(keepalive)定时器:用于检测一个空闲连接的另一 ...

  3. STM32 USB Virtual COM

    STM32 USB Virtual COM USB转串口的功能实现   这次讲的是如何实现USB转串口功能的实现.首先看看工程的布局吧: 我们主要要介绍的文件的在USB_User这个组文件.从上面的截 ...

  4. seaborn:一个更强大的画图工具

    数据加载: 1. Countplot 和之前的pandas绘图相比,使用countplot可以自动计算每类的数量. 2. KDE Plot KDE,是"kernel density esti ...

  5. TypeScript入门五:TypeScript的接口

    TypeScript接口的基本使用 TypeScript函数类型接口 TypeScript可索引类型接口 TypeScript类类型接口 TypeScript接口与继承 一.TypeScript接口的 ...

  6. 重拾MVC——第二天:Vue学习与即时密码格式验证

    今天是复习MVC的第二天,准备自己写一个后台管理,然后慢慢写大,做全. 个人感觉做 Web 的,前端知识是必备的,所有今天学习了一下 Vue,很多人用这个,我以前没有用过,今天把它补起来. 比较了各个 ...

  7. bootstrap 处理警告

    $("#id").bootstrapValidator({}).on('success.field.bv', function (e, data) { })

  8. PHP 多维数组将下标从0开始

    点击链接加入群[php/web 学习课堂]:https://jq.qq.com/?_wv=1027&k=5645xiw 欢迎大家加入,一起讨论学习 模拟一个: public function ...

  9. JavaWeb-用过滤器修改请求的返回状态码

    问题: 客户SDK对接服务,默认只识别200和非200的请求状态码.需要修改当前应用的状态码(如将201转为200) 解决方案:通过扩展HttpServletResponseWrapper,获取到每个 ...

  10. async/await 处理多个网络请求同步问题

    1.async/await是基于Promise的,是进一步的一种优化,await会等待异步执行完成 getProjectTask(id){ this.axios.get('/api/v1/task/' ...