用CSS使长串英文字符自动换行

在一个单元格内,中文字符如果超出了单元格的宽度,都会自动换行。但奇怪的是,如果全是英文的话,不论你将TD的宽度设为多大,英文字符都不会自动换行,只会一直延伸。如果做英文站点,动态输出内容,这个就麻烦了。
    幸好有个简单的办法可以解决:就是用CSS。只需用到:word-break:break-all就可以了。

    例如:

<table style="table-layout:fixed">
<tr>
<td width="100" style="word-break:break-all">Mistletoe also known throughout history as the golden bough has several different legends associated with its beginning and its meaning. 

Starting back as far as the Celtic Druids you can find more than one story concerning the mystical mistletoe. One such story is their belief that the plant held the soul of the host tree, which was the “holy oak”. During a ceremony, the Druid priests would harvest the mistletoe with a golden sickle to ensure the mistletoe never touched the ground, as it would lose its magical powers. The powers would quickly be absorbed back into the earth. Once the mistletoe was harvested, the priests would have the branches out to the people for them to use against all kinds of evils.

In England, mistletoe at one time was placed over the doorways for good luck. They believed that only happiness could pass underneath the mistletoe, therefore, enemies would hug and seal their peaceful intentions with a kiss of friendship. 

all by <a href=http://www.qpsh.com>www.qpsh.com</a>

The ancient Norse people have a wonderful legend centered on the mistletoe. In their legend, the god Odin and his wife Frigga had a son by the name of Balder. Frigga loved her son very dearly. She took steps to ensure that nothing would ever harm him by way of earth, fire, water, or air. 

The mistletoe did not fit into any of these categories, so an evil spirit by the name of Loki created an arrow out of mistletoe and gave it to Balder’s brother, Holder. Holder was blind and Loki held onto his hand and shot Balder in the heart with the mistletoe arrow. Balder died.

From this moment on, the legend is told differently in various stories. One is that Balder is brought to life. In another one, he had a Viking’s funeral and was sent to the Otherworld on a burning ship. He was to remain there until it was time for him to come back to earth to start a new era. 

From that day, forward, Frigga stated the mistletoe would never harm anyone again and made it a symbol of love and made the promise to bestow a kiss upon everyone who passed beneath it.
</td>
</tr>
</table> 

时间: 2024-11-03 05:52:30

用CSS使长串英文字符自动换行的相关文章

js实现连续英文字符自动换行兼容ie6 ie7和firefox_javascript技巧

复制代码 代码如下: irefox中连续英文字符如果要CSS控制强制换行,探索了N久,发现是实现不了的逼不得已的时候就用js脚本进行控制吧 英文字符自动换行,通过js脚本截断字符串,此方法通用ie6,ie7,firefox兼容解决办法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

3 8-视频出现不能播放 现实一长串英文

问题描述 视频出现不能播放 现实一长串英文 视频出现Cannot load M3U8: crossdomain access denied:Error #2048 怎么解决 求教 谢谢 解决方案 问个弱智的问题,你这个问题是怎么提出来来的,我找了半天也想提问一个问题,但是找不到在那里提问,你能不能告诉我 解决方案二: 写点log定位看看 解决方案三: Cannot load M3U8: crossdomain access denied:Error #2048 ,不能跨域加载视频吧.你的是fla

css中连续的英文不能自动换行解决办法

我们在页面中常会见到比如网址无法自动折断(如下图) 如果是汉字,则可以自动换行.如果是连续的英文或数字会被视为一个单词,即使达到最大宽度也不会自动折断,而是直接到换到下一行. 那么这里就可以使用word-break:break-all;来实现长英文自动折断(效果如下图). 如  代码如下 复制代码 :<p style="word-break:break-all;"></p> 最后总结一下 1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap :

css解决英文字符与阿位伯数字自动换行

word-wrap是控制换行的,可取:word-wrap:break-word normal break-all keep-all break-word:它主要用来是控制是否将强制把单词换行,对于中英中文没有任何问题,但是对于长串的英文无效. normal:英文单词不被拆开,它是默认值. break-all,主要解决了长串英文的问题.主要用来是断开单词.在单词到边界时,下个字母自动到下一行. keep-all,是指对于中.日.单词之间不断词.即只用此时,不用word-wrap,中文就不会换行了.

CSS网页制作技巧:CSS纯英文数字自动换行

文章简介:并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行.这个问题如何解决?先来认识一下两位主角word-wrap和word-break. 当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器,不会自动换行 并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行.这个问题如何解决?先来认识一下两位主角word-wrap和word-break word-wrap用来控制换行两种取值:(1)normal (2)break-

CSS:div 实现长英文字母自动换行CSS

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 最佳CSS定义换行代码 .wrap { table-layout:fixed; word-break: break-all; overflow:hidden; } 这里 overflow:hidden;或者 auto: ================================================================= 对于div,p等块

div+CSS实现长英文字母自动换行

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 最佳CSS定义换行代码 .wrap { table-layout:fixed; word-break: break-all; overflow:hidden; } 这里 overflow:hidden;或者 auto: ================================================================= 对于div,p等块

css连续字符自动换行(word-wrap和word-break)的解决方案

下面是常见浏览器的支持情况: 面是常见浏览器的支持情况:   IE6/7/8[1] Firefox2/3[2] Firefox3.5 Opera9+ Safari9.5+/Chrome {word-wrap:break-word;} td元素需设置其宽度 见例4和例5 不支持 不支持td元素 见例4和例5 不支持 不支持td元素 见例4和例5 {word-break:break-all;} 不支持连续的符号 见例3 不支持 不支持连续的符号 见例3 不支持 支持 由于{word-break:br

css 连续字符自动换行的解决方案

对文本的处理新增了两个新属性word-wrap和word-break来解决这个问题: {word-break:break-all;} :依照亚洲语言和非亚洲语言的文本规则,允许在字内换行,且允许非亚洲语言文本行的任意字内断开 {word-wrap:break-word;}: 内容将在边界内换行,如需要则词内换行(word-break)也行发生   IE6/7/8[1] Firefox2/3[2] Firefox3.5 Opera9+ Safari9.5+/Chrome {word-wrap:br