CSS 强制自动换行实例

CSS设置强制换行:

  word-break:break-all 强制断开实现转行
  normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
  break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
  keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法
  设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。对于中文,应该使用break-all 。

对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html

 代码如下 复制代码
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
css
#wrap{white-space:normal; width:200px; }

1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行

 代码如下 复制代码

#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

效果:可以实现换行

2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

 代码如下 复制代码

#wrap{word-break:break-all; width:200px; overflow:auto;}

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

实例

 代码如下 复制代码

<style type="text/css"> 
.AutoNewline 

  word-break: break-all;/*必须*/ 

</style> 

<table> 
<tr> 
  <td class="AutoNewline">行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行</td> 
</tr> 
</table>

时间: 2024-08-01 17:19:06

CSS 强制自动换行实例的相关文章

学习网页技术CSS实现自动换行功能

css|网页 自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>css#wrap{white-spa

CSS强制换行对齐的实现方法

 本文实例讲述了CSS强制换行对齐的实现方法.分享给大家供大家参考.具体分析如下: 用CSS控制中英文字符强制换行并两端对齐,有效避免DIV的内容超出范围而改变网页布局,强制换行的功能很实用.   代码如下: <html> <head> <title>CSS强制换行对齐</title> </head> <body> 英文对齐: <div style="font-size:12px;width:300;text-alig

怎么让css不自动换行代码

浮动层加margin后换行的例子: 比如说有个DIV宽度为380px,它里面有一个菜单列表,每个宽度为60px,margin-right为20px.如果就按照下面的HTML结构来做的话,那么这个菜单列表能在这个DIV里一行显示完整吗? <div>      <div>mb5u1</div>      <div>mb5u2</div>      <div>mb5u3</div>      <div>mb5u4&l

HTML+CSS网页制作实例:制作左上角卷角效果的网页

文章简介:HTML+CSS网页制作实例:制作左上角卷角效果的网页. 英文原文 http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/ 这篇文章中我们将介绍如何制做paper左上角的卷角效果. 我想让我的几句文字以一张有卷角折叠效果的纸为背景,如果直接用一张图片,很容易实现,但是这里我要用css来实现. 我的这种实现方法并不是非常具有创新意义,但是还是值得拿出来分享的,简单的来说,除了一个矩形

CSS网页制作实例代码:模拟新浪微博的三角图像

文章简介:CSS网页制作实例代码:新浪微博的三角图像. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta

CSS网页设计实例:商旅网首页的标签切换

文章简介:CSS网页设计实例:商旅网首页的标签切换. 上个月的项目了...标签切换有很多方法可以实现,这里贴一段我个人很喜欢用的代码: <ul class="tabmenu"><li class="menu_flt">机票</li>< li>酒店</li>< li>旅游度假</li>< /ul> 对于web标准化来讲,这种结构很清晰,当图片未显示的时候同样可以知道文本内容

CSS网页制作实例:有条件的添加hover样式

文章简介:CSS网页制作实例:有条件的添加hover样式. 给元素添加一个hover样式,很简单,我们来看一个透明度的例子吧: 1 2 3 4 5 6 div { opacity: 1.0; } div:hover { opacity: 0.5; } 但是如果我们只是想让当前真正hover了的div显示,而让其他的div模糊呢?假设我们的HTML结构如下: 1 2 3 4 5 <section> <div></div> <div></div> &

CSS滑动门实例

兼容各浏览器的CSS滑动门实例,代码如下,可运行看效果.  css+div滑动门效果在网页上非常常见,应用范围很广泛,可以减少网页空间的占用,把相同的类别可以归类到一起,用CSS滑动门而实现效果.网上很多CSS+JS滑动门效果都不是很好, 要么太固定了,要么就是内容里面不能再插入DIV标签.这个版本是同事帮我改进的,用起来非常方便. css+div滑动门效果 (预览页面有两个例子,一个是点击触发事件,一个是鼠标滑过实现效果,onclick 和onmouseover 不同) [Ctrl+A 全部选

jQuery的css()方法用法实例_jquery

本文实例讲述了jQuery的css()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置匹配元素的一个或多个样式属性. 语法结构: 语法一: 取得指定样式属性的属性值.以样式属性名称作为参数.例如: 复制代码 代码如下: $("div").css("color") 以上代码能够获取div的字体颜色值. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta ch