css 文字展示两行 其余的省略号显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.comment_inner{
width: 200px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 3; /** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/
}
</style>
<body>
<div>
<p>
word-break 属性规定自动换行的处理方法。normal(使用浏览器默认的换行规则。),break-all(允许在单词内换行。),keep-all(只能在半角空格或连字符处换行。)
</p>
</div>
</body>
</html>
一般常用 一行的。
1.overflow:hidden;
2.text-overflow:ellipsis;
3.-o-text-overflow:ellipsis;
4.white-space:nowrap;
5.width:100%;
其中,overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号;-o-text-overflow: ellipsis针对Opera;而宽度的设定主要是针对IE6;
该方法支持Internet Explorer, Safari, Chrome 和 Opera,但FF并不支持,不过可以通过Jquery来实现类似的效果。
css 文字展示两行 其余的省略号显示的更多相关文章
- CSS——div内文字的溢出部分用省略号显示
使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...
- css实现超出一行后用省略号显示
css实现超出一行后用省略号显示 a{display:inline-block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden ...
- 翻译:如何使用CSS实现多行文本的省略号显示
本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添加译者的一些感想,请各位读者谅解. 合理的 ...
- Css解决表格超出部分用省略号显示
小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...
- CSS文字超出div或者span时显示省略号
我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...
- 【css】文本超出行数以省略号显示
//超出2行省略overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webk ...
- 微信小程序的分享功能-css文字超过两行隐藏
.info{ width:100px; word-break:break-all; display:-webkit-box; -webkit-box-orient:vertical; -webkit- ...
- JS控制文字只显示两行,超出部分显示省略号
由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...
- css 文字超出部分显示省略号(原)
单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...
随机推荐
- kubernetes dns 初步理解和使用 dnsmasq dns服务器跟host机器同步
1.安装DNS后,pod就可以通过dns来解析service,从而实现通信 2.创建一个dns测试工具pod apiVersion: extensions/v1beta1 kind: Deployme ...
- [图解tensorflow源码] Session::Run() 分布式版本
- 使用VS Code发布博客
使用VS Code 发布文章 这也是学习别人怎么去使用VS Code 发布文章 上传图片 这是我上传的图片 通过插件的方式上传 ctrl+alt+aQQ截图 使用插件 Markdown All in ...
- android创建目录和文件和安装其它apk
一.android下创建目录 File sd=Environment.getExternalStorageDirectory(); String path=sd.getPath()+"/no ...
- # pc端个性化日历实现
pc端个性化日历实现 技术:vue => v-for.slot-scop 插槽域 需求:需要实现日历上每一天动态显示不同的信息 思路:运用vue 中 slot-scop 插槽域的知识点,将个性化 ...
- PHP:CURL分别以GET、POST方式请求HTTPS协议接口api
1.curl以GET方式请求https协议接口 //注意:这里的$url已经包含参数了,不带参数你自己处理哦GET很简单 function curl_get_https($url){ $curl = ...
- JavaWeb基础—会话管理之Session
一.什么是session session类似于客户端在服务器端的账户.使用Map存放 一个会话锁定一个用户(一般情况下是一个客户端,即一个浏览器独占一个session对象),即使使用浏览器访问其他程序 ...
- 2017-2018-2 《网络对抗技术》 20155322 Exp3 免杀原理与实践
#2017-2018-2 <网络对抗技术> 20155322 Exp3 免杀原理与实践 [-= 博客目录 =-] 1-实践目标 1.1-实践介绍 1.2-实践内容 1.3-实践要求 2-实 ...
- exLucas学习笔记
exLucas学习笔记 Tags:数学 写下抛硬币和超能粒子炮改 洛谷模板代码如下 #include<iostream> #define ll long long using namesp ...
- python+soket实现UDP协议的局域网广播程序
# udp_gb_server.py '''服务端(UDP协议局域网广播)''' import socket s = socket.socket(socket.AF_INET, socket.SOCK ...