首页 > 其他分享 >CSS实现强制换行的解决方法

CSS实现强制换行的解决方法

时间:2022-11-21 17:08:45浏览次数:56  
标签:word normal 换行 break 亚洲 强制 文本 CSS

CSS实现强制换行的解决方法_css

强制换行用white-space的normal,pre-wrap,pre-line换行,即使有overflow: hidden; text-overflow: ellipsis;也不影响换行。


描述

normal

默认。空白会被浏览器忽略。

pre

空白会被浏览器保留。其行为方式类似 html 中的 <pre> 标签。

nowrap

文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

pre-wrap

保留空白符序列,但是正常地进行换行。

pre-line

合并空白符序列,但是保留换行符。

inherit

规定应该从父元素继承 white-space 属性的值。

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实现强制换行的解决方法_自动换行_02

CSS实现强制换行的解决方法_自动换行_03

标签:word,normal,换行,break,亚洲,强制,文本,CSS
From: https://blog.51cto.com/u_15809510/5874259

相关文章

  • Flexbox 与 CSS Grid 两者之间有什么区别,我们应该如何使用它们?
    英文| https://betterprogramming.pub/flexbox-vs-css-grid-3e9011ee2951翻译|杨小爱刚开始编程时,我只知道如何使用flexbox。所以很自然地,我只使用了flexbox。我从不......
  • 直播电商平台开发,CSS 3之模糊与透明色背景
    直播电商平台开发,CSS3之模糊与透明色背景1.模糊blue滤镜能实现页面模糊效果,即在一个方向上的运动模糊;语法格式如下所示: blue(radius) radius参数表示接单单个......
  • 直播带货源码,CSS 3之图文混排效果
    直播带货源码,CSS3之图文混排效果1.设置图片与文字间距用padding属性能设计图片和文字之间的距离,即文字与图片之间在一定间距;padding属性主要用来在一个声明中设置......
  • css预处理和样式重置
    scss的安装和使用:1.安装:cnpmisass-loader@7node-sass@4-S2.使用:less的安装和使用:1.安装:cnpmiless@3less-loader@7-S2.使用:运行:npmrunserve/devyarn......
  • css实现多余字体用省略号表示
    第一种情况:单行文字超出固定宽度后,用省略号表示<pclass="single">单行文字超出规定宽度后,以省略号形式展示。单行文字超出规定宽度后,以省略号形式展示。</p>.single{......
  • 两行CSS让页面提升了近7倍渲染性能!
    前言对于前端人员来讲,最令人头疼的应该就是页面性能了,当用户在访问一个页面时,总是希望它能够快速呈现在眼前并且是可交互状态。如果页面加载过慢,你的用户很可能会因此离你......
  • 微信小程序使用Animate.css来实现动画效果
    1、安装官网:https://animate.style/视图--终端,打开终端(新建)npminstallanimate.css--save2、安装完了以后,会多一个文件夹:  打开文件,找到animate.css 3、......
  • css 布局整理2022-4
    理解CSS3里的Flex布局用法(转自网上,博客园修改一些方便更易看懂)简单有法:几个横排元素在竖直方向上居中display:flex;flex-direction:row;//横向排列align-items:ce......
  • variables.scss
    //颜色$colors:("primary":#db9e3f,"info-1":#4394e4,"info":#4b67af,"white":#ffffff,"light":#f9f9f9,"grey-1":#999999,"grey":#666666......
  • style.scss
    @import"./variables";//全局样式*{margin:0;padding:0;list-style-type:none;box-sizing:border-box;outline:none;}html{......