div+css显示两行或三行文字,超出用...表示
<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>
div+css显示两行或三行文字,超出用...表示的更多相关文章
- div+css显示两行或三行文字
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ; //需要控制的文本行数 overflow: hidd ...
- css 实现div内显示两行或三行,超出部分用省略号显示
一.div内显示一行,超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二.div内显示 ...
- DIV+CSS如何让图片和文字在同一行!
在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...
- Css——显示2行数据,超出显示...
解决需求——数据较长时,只显示两行,超出显示... .showTwoRow { text-align: left; text-overflow: ellipsis; display: -webkit- ...
- div 只显示两行超出部分隐藏
; -webkit-box-orient: vertical;line-height: 26px } <td rowspan="2" colspan="2" ...
- CSS3实现两行或三行文字,然后多出的部分省略号代替
概述 -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中.限制在一个块元素显示的文本的行数. 为了实 ...
- 用css控制table td内文字超出隐藏
(如有错敬请指点,以下是我工作中遇到并且解决的问题) 效果图: 重点是把table设置为table-layout: fixed; 超出的文字隐藏的效果才有. p标签超出的文字隐藏的效果不需要设置这个内 ...
- 前端笔记:div只显示两行内容,多出内容以...显示
代码: text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-bo ...
- div内文字显示两行,多出的文字用省略号显示
用-webkit-私有属性,代码如下:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;disp ...
随机推荐
- SpringBoot系列: 制作Docker镜像的全过程
本文主要参考了 https://segmentfault.com/a/1190000016449865 , 感谢作者的付出. 另外, 在本文中, 演示了Windows+Maven+Docker To ...
- Shiro 系列 - 基本知识
和 Spring Security 项目一样, Apache Shiro 也是一个被广泛使用安全框架, 它们都能完成认证.授权.会话管理等. 简单对比一下 Apache Shiro 和 Spring ...
- [物理学与PDEs]第5章第6节 弹性静力学方程组的定解问题
5. 6 弹性静力学方程组的定解问题 5. 6. 1 线性弹性静力学方程组 1. 线性弹性静力学方程组 $$\bee\label{5_6_1_le} -\sum_{j,k,l}a_{ijkl}\cf ...
- sqlserver 生成脚本执行创建索引
create or alter proc SP_CreateIndex as begin if exists(select * from sys.objects where name='execsql ...
- react-router(v4) 路由跳转后返回页面顶部问题
遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路 ...
- sql 发送邮件
一.启用Database Mail XPs功能. 查看Database Mail XPs功能是否打开,从返回结果来看,value为0说明没有打开,注意SQL Mail XPs是SQL Server早期 ...
- 【原创】大数据基础之Spark(3)Spark Thrift实现原理及代码实现
spark 2.1.1 一 启动命令 启动spark thrift命令 $SPARK_HOME/sbin/start-thriftserver.sh 然后会执行 org.apache.spark.de ...
- tp5的phpword使用
1.使用composer安装phpoffice/phpword phpword的使用文档:https://phpword.readthedocs.io/en/latest/index.html 2.使 ...
- uni-app图片压缩转base64位 利用递归来实现多张图片压缩
//选择图片 chooseImage(){ let that =this uni.chooseImage({ sizeType: ['original','compressed'], //可以指定是原 ...
- pl/sql学习(5): 触发器trigger/事务和锁
(一)触发器简单介绍 触发器是由数据库的特定时间来触发的, 特定事件主要包括以下几种类型: (1)DML: insert, update,delete 增删改 (2)DDL: create, alte ...