关于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是控制字与字之间空格的宽度.

时间: 2024-11-10 14:05:45

关于word-break,word-wrap换行的相关文章

Word Break &amp;&amp; Word Break II

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 space-separated sequence of one or more dictionary words. For example, given s = "leetcode", dict = ["

Word Break/Word Segment

Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separated sequence of one or more dictionary words. For example, givens = "leetcode",dict = ["leet", "code"]. Return true because &

[email&#160;protected] [139/140] Word Break &amp; Word Break II

https://leetcode.com/problems/word-break/ Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separated sequence of one or more dictionary words. For example, givens = "leetcode",dict = ["leet"

word break和word wrap

默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(normal | break-word):表示是否要断词 word wrap break-word   [要断词] 独占一行(默认情况下单词太长就会被换到下一行去,所以就独占一行了)的单词被断开成多行, 默认值normal,则不断词,而是一行显示,超出容器 word break break-all:和上面相比

Word Break II

https://oj.leetcode.com/problems/word-break-ii/ Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each word is a valid dictionary word. Return all such possible sentences. For example, givens = "catsanddog

[leecode]Word Break II

Word Break II Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each word is a valid dictionary word. Return all such possible sentences. For example, givens = "catsanddog",dict = ["cat", &q

[C++]LeetCode: 113 Word Break II (DP &amp;&amp; Backtacking) 求解拆分组合

题目: Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each word is a valid dictionary word. Return all such possible sentences. For example, given s = "catsanddog", dict = ["cat", "cats

leetcode[140] Word Break II

这题是上一题的加强版,这里需要返回的是所有可能的分割词.例如: s = "catsanddog",dict = ["cat", "cats", "and", "sand", "dog"]. A solution is ["cats and dog", "cat sand dog"]. 先用dp求得每个起点到终点是否符合word break 1中的条

Leetcode dfs Word Break II

Word Break II Total Accepted: 15138 Total Submissions: 92228My Submissions Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each word is a valid dictionary word. Return all such possible sentences. For ex

Leetcode dp Word Break

Word Break Total Accepted: 22281 Total Submissions: 105657My Submissions Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separated sequence of one or more dictionary words. For example, given s = "leetcod