CSS中控制不换行属性

强制不换行属性

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

注意,一定要指定容器的宽度,不然的话是没有用的。

注意word-break 是IE5+专有属性

  1. word-break : normal | break-all | keep-all  

参数:
normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
说明:
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。

 

时间: 2024-08-17 13:24:21

CSS中控制不换行属性的相关文章

详细讲解CSS中alt和title属性的困惑

css 浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事,他们可能会造成一些问题,或者至少产生了混淆.例子之一就是一些浏览器处理alt属性(一般会被错误的称作alt标签)的方式,比如拥有大量用户的Windows的IE浏览器. 替换文字(alt text)并不是用来做提示(tool tip),或者更加确切的说,它并不是为图片提供额外说明信息的.相反地,title属性才应该用来为元素提供额外说明信息.这些信息在大部分图像浏览器里显示为提示(tool tip),虽然制造商可以任意采取其他方式渲染ti

css中visibility与display属性区别比较

浏览器支持 所有主流浏览器都支持 visibility 属性. 注释:任何的版本的 internet explorer (包括 ie8)都不支持 "inherit" 和 "collaps教程e" 属性值. 所有主流浏览器都支持 display 属性. 注释:任何版本的 internet explorer (包括 ie8)都不支持 "inherit"."inline-table"."run-in"."

CSS中的文本属性

本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性(Text) CSS 字体属性(Font) CSS3新增属性 文本阴影:text-shadow 文本溢出:text-overflow 这个属性一般需要配合overflow:hidden和white-spance:nowrap(强制文本容器不换行)使用. 文本换行:word-wrap word-brea

css中字符换行的一些问题

我们在处理文章的内容的过程中由于文章内容混杂有中文.英文.数字等其他字符,而我们常见的英文和数字是无法在包裹元素中自动换行,这往往会导致元素被撑破,如下图所示: css中word-break可以解决这个问题,写个测试页面来做个笔记 css代码: body{font-size:14px;} p{ border:solid 1px red;width:200px;} html代码: <body>     <p class="test">English中文中文中文中文

详细学习CSS中的网页布局的属性

css|网页 布局(Layout)属性: 在以前的HTML里,元素的位置只能靠元素的依次排列觉得,而在CSS里你可以更精确的定位元素.Netscape曾提出过Layer标记,它对于精确布局很有好处,但是并没有被W3C承认,W3C在CSS提出了类似于Layer标记的功能. position属性: position属性用来决定元素的位置类型,详见属性: 属性名称: 'position'属性值: absolute | relative | static初始值: static适合对象: 所有元素是否继承

深入理解css中的position定位和z-index属性

由于平时不太用到,所以过去写css的时候对于position属性的absolute. relative值理解比较模糊,对于z-index的层叠更是摸不着头脑,除了理解的因素外,各个浏览器的不同解析结果也是一个大问题.今天仔细阅读了一下css文档,总算是对盒模型的浮动.定位有了比较深刻的理解. 我们在实践中很有可能遇到这样的问题: 1.做一个横向导航,然后鼠标经过之后出现下拉菜单,那么这个下拉菜单的位置控制就是一个关键: 2.我们想在一个正常的页面布局中放入几个浮在页面上的气泡提示,这时既不想让气

推荐深入理解css中的position定位和z-index属性_经验交流

作者:Cutsin 原文地址:http://www.moonless.net/blog/2007/09/csspositionz-index.html 注:本文仅供交流使用,如有不当之处欢迎批评指正,但请注明详由,谢谢! 由于平时不太用到,所以过去写css的时候对于position属性的absolute.relative值理解比较模糊,对于z-index的层叠更是摸不着头脑,除了理解的因素外,各个浏览器的不同解析结果也是一个大问题.今天仔细阅读了一下css文档,总算是对盒模型的浮动.定位有了比较

css中-webkit-box-reflect属性简介及元素镜像倒影实现

一.从前有只鸭子 从前有只鸭子,长得不是一般的丑: 梁朝伟 我是一只鸭子 于是,鸭子一直很自卑,从来不敢照镜子,也不敢下河游泳.别的鸭子很喜欢下河游泳,因为可以一边玩耍,一边上WC,让吃进去的东西舒舒服服从后面出来:而这只鸭子一旦下河,吃进去的东西只会是从前面出来,因为总会不经意看到自己的脸. 就这样很过去了很多很多年,世事变化无常,当年会说话住山洞被鸭子调戏的猩猩逆袭现在住进了动物界的五星级宾馆--上海野生动物园:而鸭子自己,历经岁月的沧桑,容貌也发生了巨大的变化: 梁朝伟 很帅的鸭子 然而,

注意CSS代码中的!important属性

CSS中的!important是一个非常重要的属性,有时候发挥着非常大的作用,这方面的知识并不是非常多,我们看下面的文章,对它作比较感观的了解. 前几天写一些CSS代码的时候又难为我了,因为那个该死的IE6对CSS的支持是如此的差劲,以前我还没注意过,因为做的东西基本都是基于IE的,可是我这次为博客写的CSS要支持不止IE一个浏览器,可恨的是我装的Windows 7,这里面自带的是IE8浏览器,我自认为已经没有问题了,可是打开IE6,仍然出现错位,于是我决定看看IE6到底是什么情况. 我把所有的