css控制文本内容显示省略号
1,单行文字显示省略号
div{
width:200px;
overflow:hideen;
white-space:nowrap;
text-overflow:ellipsis;
}
2,多行文字显示省略号
div{
width:200px;
overflow:hideen;
text-overflow:ellipsis;
display:-webkit-box;//将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp:2;//控制显示几行文字
-webkit-box-orient:vertical;//设置伸缩盒对象的子元素排列方式
}
如果你标签内的是英文,英文是不会自动换行的,所以你需要让英文自动换行,添加一下代码
word-wrap:break-word;
word-break:break-all;
css控制文本内容显示省略号的更多相关文章
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- CSS单行文本溢出显示省略号
此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...
- css文本内容显示省略号
文字显示省略号width: 4.5rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; 但是这个属性只支持单行文本的溢出显 ...
- css实现文本溢出显示省略号
看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...
- CSS换行文本溢出显示省略号,多行
首先,div部分 <body> <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-c ...
- CSS控制长文本内容显示(截取的地方用省略号代替)
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- CSS文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
- CSS和JS实现文本溢出显示省略号
本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...
随机推荐
- 页面禁止刷新处理Js实现
document.onkeydown = function(e) { e = window.event || e; var k = e.keyCode; //屏蔽ctrl+R,F5键,ctrl+F5键 ...
- sh_08_打印小星星
sh_08_打印小星星 # 在控制台连续输出五行 *,每一行星号的数量依次递增 # * # ** # *** # **** # ***** # 1. 定义一个计数器变量,从数字1开始,循环会比较方便 ...
- Oracle数据库表空间查看和更改
set linesize 200 --设置输出一行字符个数为200 1.查看表空间名称和大小(单位MB) SELECT t.tablespace_name, round(SUM(bytes / (1 ...
- Spark 2.1.1 源码编译
Spark 2.1.1 源码编译 标签(空格分隔): Spark Spark 源码编译 环境准备与起因 由于线上Spark On Yarn Spark Streaming程序在消费kafka 写入HD ...
- 大哥带我们的mysql注入
这是今天的任务 任务三个 : 第一个手工注入找出admin用户的密码,第二个读取我phpstudy中mysql的my.ini这个配置文件的内容,第三个是通过这个注入点写入一个webshell, 都是 ...
- Linux轻量级自动运维工具-Ansible浅析 转
转自 Linux轻量级自动运维工具-Ansible浅析 - ~微风~ - 51CTO技术博客http://weiweidefeng.blog.51cto.com/1957995/1895261 Ans ...
- 【洛谷T89379 【qbxt】复读警告】
题目链接 这个题可以应用dp #include<bits/stdc++.h> using namespace std; ; inline int read() { ,b=; char c= ...
- EDM杂谈:第一个屏幕的定义和特点
在EDM营销中,经常会碰到第一个屏幕这个概念.这是什么意思呢?博主跟大家介绍一下. 图一:博文配图 这个主要是指用户在打开邮件时不需要滚动屏幕就可以看到的邮件内容.因为用户第一眼就可以看到,因此这部分 ...
- Linux_SELinux使用
目录 目录 SELinux SElinux的应用 修改 SELinux 下次启动模式 修改 SELinux 上下文 上下文的快速模仿 SELinux布尔值 图形化管理SElinux SELinux错误 ...
- 6.824 Lab 2: Raft 2A
6.824 Lab 2: Raft Part 2A Due: Feb 23 at 11:59pm Part 2B Due: Mar 2 at 11:59pm Part 2C Due: Mar 9 at ...