CSS换行和省略号
换行
原地址: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换行和省略号的更多相关文章
- css换行用省略号代替
css换行用省略号代替,也可以说是长标题的文章可以使用简单的CSS样式实现省略号控制显示. 一般的文字截断(适用于内联与块): .text-overflow{ display:block;/*内联对象 ...
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- CSS多余文本省略号显示
CSS多余文本省略号显示 本次案例代码是在 elementui 当中的 table 组件中实际需求 当然使用的是纯 CSS3 代码,所以原生支持度高,兼容性高,所以可多场景应用 对于过长文本进行单行省 ...
- CSS换行:word-wrap、word-break和text-wrap区别
一.word-wrap:允许对长的不可分割的单词进行分割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:只在允许的断字点换行(浏览器保持 ...
- CSS换行2
1.可以使用强制换行符号<br />换行.如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行-常说的小换行,与换行前没有间隔.实例如下图 换行说明图无间隔 ...
- css文本超出省略号
终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...
- css样式显示省略号
用css样式显示省略号,记 .xx{ display: block; width:200px;/*对宽度的定义,根据情况修改*/ overflow: hidden; white-space: n ...
- CSS换行:word-wrap、word-break和text-wrap差别
一.word-wrap:同意对长的不可切割的单词进行切割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:仅仅在同意的断字点换行(浏览器保 ...
- CSS换行文本溢出显示省略号,多行
首先,div部分 <body> <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-c ...
随机推荐
- 剑指offer-二叉树
1. 平衡二叉树 输入一棵二叉树,判断该二叉树是否是平衡二叉树. 解: 要么是一颗空树,要么左右子树都是平衡二叉树且左右子树深度之差不超过1 1 # class TreeNode: 2 # def _ ...
- Layman CSS3+H5实现上下垂直居中的几种主要方法
方法1:通过 translate 移位来实现 H5+CSS3: <div style="width: 100%; height: 100%; margin:0; padding: 0; ...
- visual studio 2015 Opencv4.0.1配置
最近由于工作需要,要配置opencv,我的电脑vs的version是2015,在网上下载了最新的opencv 4.0.1 自己摸索总是很困难,网上的例子也比较多,但版本比较低,也不确定适不适合vs20 ...
- Go path/filepath包
path/filepath 标准库path中有的功能filepath全部具备, 所以使用filepath即可. isABS() 判断一个路径是不是绝对路径. package main import ( ...
- 深入理解golang:Context
一.背景 在golang中,最主要的一个概念就是并发协程 goroutine,它只需用一个关键字 go 就可以开起一个协程,并运行. 一个单独的 goroutine运行,倒也没什么问题.如果是一个go ...
- springboot利用redis做缓存
首先 配置redis redis: password: 123456 host: 127.0.0.1 port: 6379 #103.249.252.109:10086 expireSeconds: ...
- Oracle 数据库下赋予用户的执行存储过程和创建表权限
grant create any table to username; grant create any procedure to username; grant execute any proced ...
- OpenSSL加密系统简介
加密基本原理 OpenSSL移植到arm开发板参考 http://blog.chinaunix.net/uid-27717694-id-3530600.html 1.公钥和私钥: 公钥和私钥就是俗称 ...
- c# 误区系列(一)
前言 整理很早以前认为的一些误区,准备整理一个系列.新手可以看下,然后大佬指点一下是否哪些地方错了. 正文 值类型存在栈上,引用类型存在堆上 很多人认为用这句话来解释值类型和栈类型的区别,甚至有些文章 ...
- 两大IT培训巨头,达内和传智播客哪个更好?
多年来,从财报收入及培训规模角度来看,达内和传智播客分别在IT培训领域占据第一和第二的位置已经是不争的事实,但是从培训学员的角度来讲,选择达内和传智播客哪个更好呢,这两家机构在学员心目中的排名和营收的 ...