换行

  原地址:https://www.cnblogs.com/meowcool/p/10130103.html

//强制不换行
div{
white-space:nowrap;
}
//自动换行
div{
word-wrap: break-word;
word-break: normal;
}
//强制英文单词换行
div{
word-break:break-all;
}
//换行
div{
white-space:normal 默认
}
//设置强行换行:
//word-break:
//normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
//break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
//keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

  

省略号

  原地址:https://blog.csdn.net/xuehu837769474/article/details/82109157

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

  

CSS换行和省略号的更多相关文章

  1. css换行用省略号代替

    css换行用省略号代替,也可以说是长标题的文章可以使用简单的CSS样式实现省略号控制显示. 一般的文字截断(适用于内联与块): .text-overflow{ display:block;/*内联对象 ...

  2. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  3. CSS多余文本省略号显示

    CSS多余文本省略号显示 本次案例代码是在 elementui 当中的 table 组件中实际需求 当然使用的是纯 CSS3 代码,所以原生支持度高,兼容性高,所以可多场景应用 对于过长文本进行单行省 ...

  4. CSS换行:word-wrap、word-break和text-wrap区别

    一.word-wrap:允许对长的不可分割的单词进行分割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:只在允许的断字点换行(浏览器保持 ...

  5. CSS换行2

    1.可以使用强制换行符号<br />换行.如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行-常说的小换行,与换行前没有间隔.实例如下图 换行说明图无间隔 ...

  6. css文本超出省略号

    终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...

  7. css样式显示省略号

     用css样式显示省略号,记 .xx{ display: block; width:200px;/*对宽度的定义,根据情况修改*/ overflow: hidden; white-space: n ...

  8. CSS换行:word-wrap、word-break和text-wrap差别

    一.word-wrap:同意对长的不可切割的单词进行切割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:仅仅在同意的断字点换行(浏览器保 ...

  9. CSS换行文本溢出显示省略号,多行

    首先,div部分 <body> <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-c ...

随机推荐

  1. IDEA文本编辑区的护眼绿豆沙色配置

    第一步:打开IDEA -> File -> settings -> Editor -> Color Scheme -> General 第二步:找到右方Text -> ...

  2. Java知识系统回顾整理01基础05控制流程05 continue

    continue:继续下一次循环 一.continue 题目: 如果是双数,后面的代码不执行,直接进行下一次循环 要求效果: 答案: public class HelloWorld { public ...

  3. mysql插入数据报 (Incorrect string value: '\xB6\xFE' for column 'name' at row 1)

    这是我的表结构 mysql> describe students; +--------+---------------------+------+-----+---------+-------- ...

  4. CAD常用知识点

    1.Ctrl+9:打开命令窗口: 2.删除标注或者其他(选择对象过滤器):输入fi后回车会出现对象选择过滤器窗口,以删除标注为例,点击选择过滤器-----标注 按以下顺序点击后回车, 框选要去掉的标注 ...

  5. Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航

    Flutter中如何实现沉浸式透明Statusbar状态栏效果? 如下图:状态栏是指android手机顶部显示手机状态信息的位置.android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色 ...

  6. 翻了翻element-ui源码,发现一个很实用的指令clickoutside

    前言 指令(directive)在 vue 开发中是一项很实用的功能,指令可以绑定到某一元素或组件,使功能的颗粒度更精细.今天在翻 element-ui 的源码时,发现一个还挺实用的工具指令,跟大伙分 ...

  7. Docker开启远程连接,本地IDEA使用docker插件连接(不认证的版本和认证的版本都有)

    前言 在学校学习的时候,要部署一个Java程序,一般是打成war包,放到服务器上的tomcat的webapp里面去: 后来SpringBoot出现内置了tomcat,就直接打成jar包,丢到服务器任何 ...

  8. tomcat 验证码显示问题

    在Web开发中使用验证码时可能遇到的问题:java.lang.NoClassDefFoundError: Could not initialize class sun.awt.X11GraphicsE ...

  9. OpenCV计算机视觉学习(5)——形态学处理(腐蚀膨胀,开闭运算,礼帽黑帽,边缘检测)

    如果需要处理的原图及代码,请移步小编的GitHub地址 传送门:请点击我 如果点击有误:https://github.com/LeBron-Jian/ComputerVisionPractice 形态 ...

  10. Jira 8.5.1 安装教程

    Jira安装教程 一.CentOS设置 1. 更换阿里源 curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/rep ...