文档章节

CSS强制英文、中文换行与不换行 强制英文换行

哈狮子
 哈狮子
发布于 2015/12/21 12:34
字数 439
阅读 87
收藏 6

1. word-break:break-all;只对英文起作用,以字母作为换行依据
2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据
3. white-space:pre-wrap; 只对中文起作用,强制换行
4. white-space:nowrap; 强制不换行,都起作用
5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现(部分浏览器支持)

代码:
.p1{ word-break:break-all; width:150px;}/*只对英文起作用,以字母作为换行依据*/
.p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用,以单词作为换行依据*/
.p3{white-space:pre-wrap; width:150px;}/*只对中文起作用,强制换行*/
.p4{white-space:nowrap; width:10px;}/*强制不换行,都起作用*/
.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}//*不换行,超出部分隐藏且以省略号形式出现*/

注意,一定要指定容器的宽度,不然的话是没有用的。
注意word-break 是IE5+专有属性

语法:word-break : normal | break-all | keep-all

参数:
normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
注意,兼容火狐浏览器强制英文换行:
<div style="word-wrap:break-word; white-space:normal; word-break:break-all; width:150px;">英文内容</div>

本文转载自:http://blog.csdn.net/pan_junbiao/article/details/7418102

上一篇: HTML 4 / 5 定义
下一篇: With语句
哈狮子
粉丝 2
博文 18
码字总数 4651
作品 0
常州
私信 提问
【CSS】CSS强制英文、中文换行与不换行

CSS强制英文、中文换行与不换行 结构: 1.Transshipment Booking System is launched只对英文起作用,以字母作为换行依据 2.Transshipment Booking System is launched只对英文起作用,以单词...

呢喃的猫咪
2013/01/05
131
0
div、p、td 的强制不换行及强制换行

关于强制不换行、强制换行的话题在网上已经被讨论了无数次,但我发现都不够全面,没有充分考虑各种浏览器、各种标签等情况,以致不兼容,所以我再来说说。由于 div 和 p 在本文的讨论中,效果...

王超
2014/03/20
1K
0
[转载]css控制文字换行

.zjtext{ font-size:12px; color:#fff; padding:5px; width:100px;white-space:normal; overflow:hidden; } 以上是我引用的,关键语:white-space:normal; overflow:hidden; 强制不换行 p.ww......

Kilar
2015/12/08
13
0
文本溢出text-overflow

本文转载于:猿2048网站文本溢出text-overflow

前端老手
08/28
15
0
不同浏览器下word-wrap,word-break,white-space强制换行和不换行总结

强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个:word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属...

BothEyes1993
2018/12/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

安装lombok 与阿里巴巴扫描规范 与取消扫描

一、安装lombok 1、先下载lombok的jar 放到eclipse的安装路径 2、打开 eclipse.ini文件 添加引入lombok的jar 我这里是这样的: -javaagent:D:\Program Files\eclipse\eclipse\lombok.jar 3、...

jason_kiss
14分钟前
2
0
基于 QML的 串口调试助手

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/weixin_38416696/article/details/80926090 Qt版本 5.10.0...

shzwork
22分钟前
1
0
Python 开发植物大战僵尸游戏

作者:楷楷 链接:https://segmentfault.com/a/1190000019418065 开发思路 完整项目地址: https://github.com/371854496/pygame 更多好玩有趣的python,尽在公众号「Python专栏」,后台回复...

上海小胖
今天
14
0
JVM优化之逃逸分析与分配消除

要了解逃逸分析背后的基本原理,我们先来看下这段有问题的C代码——当然这个是没法用Java来写的: 这段C代码在栈上创建了一个int类型的变量,然后把它的指针作为函数的返回值返回了。这样做是...

onedotdot
今天
3
0
最简单的获取相机拍照的图片

  import android.content.Intent;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import andr......

MrLins
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部