css英文文本不换行,CSS样式表让英文文本自动换行

大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是CSS如何将他们自动换行的方法！对于Div和table以及不同的浏览器，实现css自动换行的方法都稍有不同，下面分别介绍：

对于div

1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]

#wrap{white-space:normal; width:200px; }

或者：

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

ddd111111111111111111111111111111

效果：可以实现自动换行

2.(Firefox浏览器)white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！

div css xhtml xml Example Source Code Example Source Code [www.52css.com]

#wrap{white-space:normal; width:200px; overflow:auto;}

或者：

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

ddd1111111111111111111111111111111111111111

效果：容器正常，内容隐藏

对于table

1. (IE浏览器)使用样式table-layout:fixed：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]

.tb{table-layout:fixed}

abcdefghigklmnopqrstuvwxyz 1234567890

效果：可以自动换行

2.(IE浏览器)使用样式：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]

.tb {table-layout:fixed}

abcdefghigklmnopqrstuvwxyz 1234567890

效果：可以自动换行

3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]

.tb{table-layout:fixed}

abcdefghigklmnopqrstuvwxyz 1234567890

效果：两个td均正常自动换行

4.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]

.tb {table-layout:fixed}

.td {overflow:hidden;}

abcdefghigklmnopqrstuvwxyz 1234567890

这里单元格宽度一定要用百分比定义效果：正常显示，但不能换行。

css英文文本不换行,CSS样式表让英文文本自动换行相关推荐

怎样用html设置文档格式,Dreamweaver使用CSS样式表设置网页文本格式
Dreamweaver使用CSS样式表设置网页文本格式互联网发布时间:2008-10-17 19:35:50 作者:佚名我要评论本文章介绍如何在 Dreamweaver 中使用层叠 ...
CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
前言:本篇文章为 CSS 基础系列笔记第一篇,参考黑马程序员pink老师前端入门教程如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...
用于设定表格样式的附加css,Dreamweaver使用CSS样式表设置网页文本格式
核心提示:本文章介绍如何在 Dreamweaver 中使用层叠样式表 (CSS) 设置页面中的文本格式.您可以使用 CSS 以 HTML 无法提供的方式来设置文本格式和定位文本,从而能更加灵活自如地控 ...
css英文文本不换行,css怎么实现英文不换行
css实现英文不换行的方法:首先创建一个HTML示例文件:然后在body中定义一些英文内容:最后通过添加"white-space:nowrap;"属性实现英文不换行效果. 本文操作 ...
css实例 css中id/class 详解样式表（外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解）[第一天]
文章目录 css实例 css中的id css中的class 样式表外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解 css实例 CSS 规则由两个主要的部分构成:选择器,以 ...
html 英文字母不换行,css如何设置英文单词不换行？
css可以通过word-wrap属性来设置英文单词不换行,将word-wrap属性的属性值设为nowrap即可设置英文单词强制不换行. css设置强制英文不换行: p { white-space: n ...
CSS滤镜及渐变nbsp;(filter样式表属性)
滤镜效果描述 ------------------------------------------------ ...
css修改鼠标点击的样式表
更改鼠标指针样式鼠标指针的不同样式平常,我们在浏览界面时,会发现鼠标的样式有所不同,鼠标的样式变化和cursor属性有关.cursor属性的几个关键字:default.pointer.wait.h ...
eplan文本怎么换行_JDK 14的新特性:文本块Text Blocks
说起来,Text Blocks是在JDK13中以第一次预览版本引入的.现在在JDK14中是第二次预览版本 JEP 368: Text Blocks. 在我们日常的工作中,有时候需要用到一大段的字符串, ...

css英文文本不换行,CSS样式表让英文文本自动换行

css英文文本不换行,CSS样式表让英文文本自动换行相关推荐

最新文章

热门文章