css强制不换行white-space:nowrap

(2009-11-25 17:12:53)

标签:

it

Tags:

强制不换行

div{white-space:nowrap;}

自动换行

div{word-wrap: break-word;word-break: normal;}

强制英文单词断行

div{word-break:break-all;}

CSS设置不转行:

overflow:hidden 隐藏

white-space:normal 默认

pre 换行和其他空白字符都将受到保护

nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象

设置强行换行:

word-break:

normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

break-all :

该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all :

与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

英文不换行

CSS里加上 word-break: break-all;

问题解决。这个问题只有IE才有,在FF下测试,FF可以自己加滚动条,这样也不影响效果

建议大家做Skin时,记得在body里加 word-break: break-all;

这样可以解决IE的框架被英文撑开的问题

以下引用word-break的说明, 注意word-break 是IE5+专有属性

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

参数:

normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

break-all :

该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all :

与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。

对于中文,应该使用break-all 。

对应的脚本特性为wordBreak。请参阅我编写的其他书目。

示例:

div {word-break : break-all; }

分享:

喜欢

0

赠金笔

加载中,请稍候......

评论加载中,请稍候...

发评论

登录名: 密码: 找回密码 注册记住登录状态

昵   称:

评论并转载此博文

发评论

以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

css中white-space:nowrap,css强制不换行white-space:nowrap相关推荐

  1. css中文本指什么,CSS中的文本属性

    本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...

  2. css中ul位置移动,css中ul怎么定位

    css中ul怎么定位 css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的css position属性即可. 关于定位的几种方式1.static定位(普通流定位) - ...

  3. html中不允许自动换行,html中div不自动换行、强制不换行的具体实现方法

    本文为大家介绍下html 中p不自动换行的多种实现,如可以使用nobr标签实现不换行,用nowrap元素等等,感兴趣的朋友可以参考下 1.用标签实现不换行 代码如下: Hello world! Hel ...

  4. 如何在内嵌 css 中编写: hover_优秀 CSS 代码的 8 个编写技巧!

    这篇文章的目的不在于规则手册,而在于你正在编写CSS时的指南.希望能帮助大家找到自己的流程,而这篇文章的目标是让你的CSS一致,简单,易于使用. 编写基本的CSS和HTML是我们作为Web开发人员学习 ...

  5. 怎么在css中加横线分层,CSS分层

    为什么要分层? SMACSS BEM SUIT ACSS 原因 CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理 大量的样式,覆盖.权重和很多!importa ...

  6. css中float详解,CSS浮动属性Float详解?史上最全Float详解

    我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...

  7. css中文字段落对齐,CSS段落对齐方式

    CSS段落对齐有两种方式:水平对齐和垂直对齐. 1.水平对齐: (1).text-align:left;         //左对齐 (2).text-align:right;      //右对齐 ...

  8. css 中的zoom,对CSS中zoom属性的总结

    在css中,zoom属性作用是设置或检索对象的缩放比例.对应的脚本特性为zoom.虽然很多人都知道,但是任然有人不知道zoom的具体的用法,或者没有深究过,下面就把zoom的用法总结一下: 1.CSS ...

  9. css中文本指什么,CSS中的文本属性学习指南

    文本缩进 text-indent 值:长度值(正.负均可) 示例:p {text-indent:3em;} 字符间距 letter-spacing 值:任何长度值(正.负值均可). 示例:p {let ...

  10. css中style怎么用,css中style标签的使用方法

    css中style标签的使用方法 发布时间:2020-07-01 09:49:22 来源:亿速云 阅读:141 作者:Leah 这篇文章将为大家详细讲解有关css中style标签的使用方法,文章内容质 ...

最新文章

  1. PostgreSQL 安装配置 (亲测可用)
  2. MySql下视图的创建
  3. linux脚本定时任务,使用Linux脚本执行定时任务
  4. leetcode976. 三角形的最大周长(又是你得不到的简单题)
  5. SAP Basis Consultant Job Role
  6. oracle wms连不上,几个WMS的问题处理
  7. 第四代移动机器人:灵动科技V-AMR全球首发
  8. (2)、PHP Win10 本地配置RabbitMq
  9. 计算机组成与系统结构课设实验报告
  10. 信号添加百分比噪声的原理和方法
  11. RHEL7CentOS7 精简操作指令
  12. wps插入批注快捷键是哪个?
  13. C++异常处理底层机制详解
  14. skimage图像加噪声
  15. 河北省计算机科学专业高校排名,河北省计算机类专业大学排名
  16. python xpath定位 麦客表单
  17. cisco路由器基本实验之四 动态路由之IGRP协议的配置(Boson NetSim)
  18. 【NanoPi T2】 7.uboot gmac网卡驱动(3) - 驱动源码解析
  19. tiled素材_瓦片地图 Tiled Map
  20. 《孩子,为你自己读书》(Yanlz+Unity+SteamVR+云技术+5G+AI+VR云游戏+多多图书馆+志存当高远+读万卷书如行万里路+术业有专攻+读书是对思想的一种升华+立钻哥哥++==)

热门文章

  1. 个人备考PMP历程分享心得
  2. Jmeter性能测试1
  3. JavaScript(九)——继承
  4. [Z]CiteSeer统计的计算机领域的期刊和会议的影响因子
  5. 我理解的企业技术管理(一)——什么是技术管理
  6. 擎创技术流 | ClickHouse逻辑集群的玩法
  7. javascript笔记总结
  8. 2021年升降机司机考试及升降机司机考试题
  9. 利用Python视频处理分镜——FFmpeg、OpenCV
  10. Windows下Qt for Android开发之环境搭建