换行

  原地址: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. Java知识系统回顾整理01基础03变量06变量的作用域

    一.变量根据所处的位置对应不同的名称 变量处于不同的位置,有不同的名称 名称分别是  字段,属性 参数 局部变量 不同名称的变量,其作用域是不一样的 二.字段,属性,Field 当一个变量被声明在类下 ...

  2. Java知识系统回顾整理01基础06数组06二维数组

    一.一维数组和二维数组 这是一个一维数组, 里面的每一个元素,都是一个基本类型int int a[] =new int[]{1,2,3,4,5}; 这是一个二维数组,里面的每一个元素,都是一个一维数组 ...

  3. 栈和队列数据结构的基本概念及其相关的Python实现

    先来回顾一下栈和队列的基本概念: 相同点:从"数据结构"的角度看,它们都是线性结构,即数据元素之间的关系相同. 不同点:栈(Stack)是限定只能在表的一端进行插入和删除操作的线性 ...

  4. C1853 编译器错误:fatal error C1853: 'pjtname.pch' precompiled header file is from a previous

    转载:https://www.cnblogs.com/emanlee/archive/2010/10/16/1852998.html 用VC++ 2008 编写C语言程序,编译出现错误: 预编译头文件 ...

  5. JDBC Java 程序从 MySQL 数据库中读取数据,并备份到 xml 文档中

    MySQL 版本:Server version: 5.7.17-log MySQL Community Server (GPL) 相关内容:JDBC Java 程序从 MySQL 数据库中读取数据,并 ...

  6. 在Linux下如何根据域名自签发OpenSSL证书与常用证书转换

    在Linux下如何根据域名自签发各种SSL证书,这里我们以Apache.Tomcat.Nginx为例. openssl自签发泛域名(通配符)证书 首先要有openssl工具,如果没有那么使用如下命令安 ...

  7. 解决mybatis-plus更新数据的时候,有值为空导致更新失败的问题

    问题 在用mybatis-plus更新数据的时候,更新失败,错误信息如下: Cause: org.apache.ibatis.type.TypeException: Could not set par ...

  8. TP5自定义路由,为了安全性

    1,入口文件index.php,不要指定任意模块,不然,自定义路由,就不会有任何效果哦 2,在配置文件 route.php  中引进   use think\Router  自带路由文件 3,将路由进 ...

  9. vue项目打包-2-九五小庞

    vue项目打包 一.终端运行命令 npm run build 二.打包成功的标志与项目的改变,如下图: 3.点击index.html,通过浏览器运行,出现以下报错,如图: 四.那么应该如何修改呢?具体 ...

  10. 每日一题 LeetCode 679. 24点游戏 【递归】【全排列】

    题目链接 https://leetcode-cn.com/problems/24-game/ 题目说明 题解 主要方法:递归 + 全排列 解释说明: 将 4 个数进行组合形成算式,发现除了 (a❈b) ...