首页 > 其他分享 >css换行

css换行

时间:2022-10-24 13:47:35浏览次数:55  
标签:word space 换行 break width white css

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>

标签:word,space,换行,break,width,white,css
From: https://www.cnblogs.com/luckyuns/p/16821213.html

相关文章

  • 【CSS】464- 5种 CSS 浮动和清除浮动的方法
    浮动是布局的时用到的一种技术,能够方便我们进行布局。1、浮动的设置:css属性float:left/right/none左浮动/右浮动/不浮动(默认)2、浮动的原理:使当前元素脱离普通流,相当于浮动起......
  • 纯css实现卡牌小标签
    纯css实现卡牌小标签​​效果图​​​​代码部分​​​​补充​​效果图代码部分话不多说,直接上代码!<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8">......
  • CSS文字样式的相关属性
    Text-transform常用属性text-transform:capitalize每个单词的首字母转换为大写字母text-transform:uppercase全部转换为大写text-transform:lowercase全部转换为小写tex......
  • 纯 CSS 实现十个还不错的 Loading 效果
    来自:https://juejin.cn/post/7080542771387301896 侵删在推特上面看到T.Afif介绍的十个Loading效果。如上图。Yeah,很赞哦,挺实用的,遂记录下来。为保证运行正常,......
  • 「CSS畅想」画饼充饥,送给我好友的瓶瓶罐罐
    灵感来源情人节这天,我好友会收到她对象的礼物。一般这种节日我是不送实物礼品的,我会送几句心灵鸡汤小段子,做为精神上的慰藉。但是,自从上次给她演示了前端技术之后,我感觉她对......
  • 面试HTML CSS基础
    01.如何将下面的代码修改的更有语义化?<div><div>这是一个标题</div><div>这是一段文字</div><div><div>列表1</div><div>列表2</div></div></div......
  • CSS实现渐变色边框
    三种方式:1.用border-image来实现:.box{width:200px;height:200px;border:10pxsolid#ddd;border-image:......
  • 前端开发——CSS样式
       1.CSS样式的三种引入方式 1.1内嵌式   1.2外联式     1.3行内式  三种引入方式用处:  2.基础选择器 ......
  • CSS background-image的使用,让超大背景图的主要区域显示
    CSSbackground-image的使用,让超大背景图的主要区域显示,你的电脑屏幕小,原图是1920*1110的   ......
  • Apache HTTPD 换行解析(CVE-2017-15715)
    httpd是Apache超文本传输协议(HTTP)服务器的主程序。Apache是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛......