关于word-break,word-wrap换行
目前项目中有一些流程日志需要动态显示到页面上,实现方法是ajax动态获取附加到<span></span>标签上,然后设置word-break:break-all样式使其自动换行,word-break允许词间换行,针对长字符串,当超出外层div时换行,但是在chrome下显示正常,在IE8下就不起作用了,应用网上说的word-wrap:break-word;overflow:hidden,还是不行,解决方法是把span标签换成p标签,这里p是块级元素,那么直接在span上加display:block也是可以的;
这里网上查资料比较了word-break和word-wrap的区别,
word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。特别是一行中最后一个单词如果太长,它即使超过了div的宽度,也不会换行的。
word-break是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)
ie下:
使用word-wrap:break-word;所有的都正常。
ff下:
如这2个都不用的话,中文不会出任何问题。英文语句也不会出问题。但是,长串英文会出问题。
为了解决长串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式会导致,普通的英文语句中的单词会被断开(ie下也是)。
目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。
即英文单词应不应该被断开那?那问题很明显了,显然不应该被断开了。
对于长串英文,就是恶意的东西,自然不用去管了。但是,也要想些办法,不让它把容器撑大。
用:overflow:auto; ie下,长串会自动折行。ff下,长串会被遮盖。
最好的方式是word-wrap:break-word;overflow:hidden;
而不是word-wrap:break-word;word-break:break-all;。
word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下,长串会被遮住部分内容。
这里又延伸到文字间距的两个属性
letter-spacing定义了字与字之间的距离.
word-spacing是控制字与字之间空格的宽度.
关于word-break,word-wrap换行的更多相关文章
- 17. Word Break && Word Break II
Word Break Given a string s and a dictionary of words dict, determine if s can be segmented into a s ...
- LeetCode之“动态规划”:Word Break && Word Break II
1. Word Break 题目链接 题目要求: Given a string s and a dictionary of words dict, determine if s can be seg ...
- LeetCode ||& Word Break && Word Break II(转)——动态规划
一. Given a string s and a dictionary of words dict, determine if s can be segmented into a space-sep ...
- leetcode@ [139/140] Word Break & Word Break II
https://leetcode.com/problems/word-break/ Given a string s and a dictionary of words dict, determine ...
- word break和word wrap
默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...
- [LeetCode] Word Break II 拆分词句之二
Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...
- 【leetcode】Word Break II
Word Break II Given a string s and a dictionary of words dict, add spaces in s to construct a senten ...
- LeetCode:Word Break II(DP)
题目地址:请戳我 这一题在leetcode前面一道题word break 的基础上用数组保存前驱路径,然后在前驱路径上用DFS可以构造所有解.但是要注意的是动态规划中要去掉前一道题的一些约束条件(具体 ...
- LeetCode Word Break II
原题链接在这里:https://leetcode.com/problems/word-break-ii/ 题目: Given a string s and a dictionary of words ...
- 【LeetCode OJ】Word Break II
Problem link: http://oj.leetcode.com/problems/word-break-ii/ This problem is some extension of the w ...
随机推荐
- 【转】关于Certificate、Provisioning Profile、App ID的介绍及其之间的关系
原文网址:http://www.cnblogs.com/cywin888/p/3263027.html 刚接触iOS开发的人难免会对苹果的各种证书.配置文件等不甚了解,可能你按照网上的教程一步一步的成 ...
- Android-获取外置SDcard路径
Android手机支持SDcard.目前很多手机厂商把SDcard集成到手机中,当然有的手机同时也支持可插拔的SDcard.这就有了内置SDcard和位置SDcard之分.当手机同时支持内置和外置SD ...
- (转载)PureMVC 练习时的注意事项
(转载)http://blog.sina.com.cn/s/blog_4d5a45ce01010axd.html 1.主文件里实例化facade. 把主要的UI都放进去2.第二步创建VO3.UserF ...
- sublime中文乱码解决办法
欲解决问题,关键在于让Sublime Text 2支持GB2312和GBK.步骤如下: 1.安装Sublime Package Control. 在Sublime Text 2上用Ctrl+-打开控制 ...
- Bzoj 1856: [Scoi2010]字符串 卡特兰数,乘法逆元,组合数,数论
1856: [Scoi2010]字符串 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1194 Solved: 651[Submit][Status][ ...
- Bzoj 1984: 月下“毛景树” 树链剖分
1984: 月下“毛景树” Time Limit: 20 Sec Memory Limit: 64 MBSubmit: 1282 Solved: 410[Submit][Status][Discu ...
- Delphi 7下使用Log4Delphi 0.8日志组件
Log4Delphi是一个开放源码项目,旨在制作用于Borland的Delphi高质量实用的日志套件,是基于Apache Software Foundation的log4j包. 安装: ...
- HW4.21
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- C语言中可变参数的用法
原文地址: http://blog.csdn.net/wooin/archive/2006/04/29/697106.aspx 我们在C语言编程中会遇到一些参数个数可变的函数,例如printf() ...
- PHP学习笔记-00
PHP这门语言的就不用多说啦,使用率非常高的一门后端开发语言.之前一直希望可以学习了解一下PHP.之前主要在做Java和OC这类语言的开发,对于PHP这种脚本语言(动态语言)还是了解甚少. 近期看了一 ...