<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显示两行或三行文字,超出用...表示的更多相关文章

  1. div+css显示两行或三行文字

    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ; //需要控制的文本行数 overflow: hidd ...

  2. css 实现div内显示两行或三行,超出部分用省略号显示

    一.div内显示一行,超出部分用省略号显示 white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis; 二.div内显示 ...

  3. DIV+CSS如何让图片和文字在同一行!

    在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...

  4. Css——显示2行数据,超出显示...

    解决需求——数据较长时,只显示两行,超出显示... .showTwoRow { text-align: left; text-overflow: ellipsis; display: -webkit- ...

  5. div 只显示两行超出部分隐藏

    ; -webkit-box-orient: vertical;line-height: 26px } <td rowspan="2" colspan="2" ...

  6. CSS3实现两行或三行文字,然后多出的部分省略号代替

    概述 -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中.限制在一个块元素显示的文本的行数. 为了实 ...

  7. 用css控制table td内文字超出隐藏

    (如有错敬请指点,以下是我工作中遇到并且解决的问题) 效果图: 重点是把table设置为table-layout: fixed; 超出的文字隐藏的效果才有. p标签超出的文字隐藏的效果不需要设置这个内 ...

  8. 前端笔记:div只显示两行内容,多出内容以...显示

    代码: text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-bo ...

  9. div内文字显示两行,多出的文字用省略号显示

    用-webkit-私有属性,代码如下:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;disp ...

随机推荐

  1. SpringBoot系列: 制作Docker镜像的全过程

    本文主要参考了 https://segmentfault.com/a/1190000016449865 , 感谢作者的付出. 另外,  在本文中, 演示了Windows+Maven+Docker To ...

  2. Shiro 系列 - 基本知识

    和 Spring Security 项目一样, Apache Shiro 也是一个被广泛使用安全框架, 它们都能完成认证.授权.会话管理等. 简单对比一下 Apache Shiro 和 Spring ...

  3. [物理学与PDEs]第5章第6节 弹性静力学方程组的定解问题

    5. 6 弹性静力学方程组的定解问题 5. 6. 1 线性弹性静力学方程组 1.  线性弹性静力学方程组 $$\bee\label{5_6_1_le} -\sum_{j,k,l}a_{ijkl}\cf ...

  4. sqlserver 生成脚本执行创建索引

    create or alter proc SP_CreateIndex as begin if exists(select * from sys.objects where name='execsql ...

  5. react-router(v4) 路由跳转后返回页面顶部问题

    遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路 ...

  6. sql 发送邮件

    一.启用Database Mail XPs功能. 查看Database Mail XPs功能是否打开,从返回结果来看,value为0说明没有打开,注意SQL Mail XPs是SQL Server早期 ...

  7. 【原创】大数据基础之Spark(3)Spark Thrift实现原理及代码实现

    spark 2.1.1 一 启动命令 启动spark thrift命令 $SPARK_HOME/sbin/start-thriftserver.sh 然后会执行 org.apache.spark.de ...

  8. tp5的phpword使用

    1.使用composer安装phpoffice/phpword phpword的使用文档:https://phpword.readthedocs.io/en/latest/index.html 2.使 ...

  9. uni-app图片压缩转base64位 利用递归来实现多张图片压缩

    //选择图片 chooseImage(){ let that =this uni.chooseImage({ sizeType: ['original','compressed'], //可以指定是原 ...

  10. pl/sql学习(5): 触发器trigger/事务和锁

    (一)触发器简单介绍 触发器是由数据库的特定时间来触发的, 特定事件主要包括以下几种类型: (1)DML: insert, update,delete 增删改 (2)DDL: create, alte ...