零基础建站培训介绍

当前位置:

CSS实现强制换行/自动换行/不换行

在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求。虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧。

CSS实现强制换行/自动换行/不换行

今天我们来学习一下如何熟练的掌握用css实现文字的强制不换行/自动换行/强制换行的方法。需要的伙伴们可以来一起学习哦!

1. 强制不换行


div{
 white-space:nowrap;
}

2. 自动换行


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

3. 强制英文单词断行


div{
 word-break:break-all;
 }

4. CSS设置不转行:

overflow:hidden 隐藏
white-space:normal 默认
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象

5. 设置强行换行:

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 。

上一课: 下一课:

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 学习了网站制作课程的学员都知道,网站的样式都是受CSS来控制的。下面是控制的CSS样式代码:强制不换行div{white-space:nowrap;}自动换行
  • css 4种引入方式 (12865 次学习)
    HTML中引入CSS控制有下面四种方式:(相关教程:HTML入门教程)1)行内式比如:<body><h1 style="color:white;background-color:bl
  • 我们在自己建网站时,经常需要用到background属性。我们还可以通过background-size来控制背景图片的尺寸。background-size有几个属性值,常用的是cov
  • Css样式的float浮动属性,用于设置标签对象(如:<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签)的浮动布局,浮
  • :before 伪元素在元素之前添加内容:before这个伪元素允许创作人员在元素内容的特别前面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属
  • Animate动画名称大全 (146373 次学习)
    animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡
  • CSS3新增选择器有哪些 (142076 次学习)
    css1-css3提供特别丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到。(相关教程:CSS3视频教
  • CSS3中的动画功能分为Transitions和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果。一.TransitionsTransitions功能通过光
  • 在自己建网站时,CSS是控制网站各类样式的文件,CSS全部是英文,为了方便学建网站新手使用CSS,下面是学做网站论坛总结的常用CSS英文汉语词汇对照表.
  • CSS3常用属性手册 (144442 次学习)
    CSS3新增选择器有哪些:https://www.xuewangzhan.net/baike/css3-232.html  CSS3中的transform 变形功能:transform:rotate():旋转  t