<!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 文字展示两行 其余的省略号显示的更多相关文章

  1. CSS——div内文字的溢出部分用省略号显示

    使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...

  2. css实现超出一行后用省略号显示

    css实现超出一行后用省略号显示 a{display:inline-block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden ...

  3. 翻译：如何使用CSS实现多行文本的省略号显示

    本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添加译者的一些感想,请各位读者谅解. 合理的 ...

  4. Css解决表格超出部分用省略号显示

    小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...

  5. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

  6. 【css】文本超出行数以省略号显示

    //超出2行省略overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webk ...

  7. 微信小程序的分享功能-css文字超过两行隐藏

    .info{ width:100px; word-break:break-all; display:-webkit-box; -webkit-box-orient:vertical; -webkit- ...

  8. JS控制文字只显示两行，超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  9. css 文字超出部分显示省略号(原)

    单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...

随机推荐

  1. centos 6.8安装java环境

    1.rpm -qa |grep java   查看当前是否有java已经安装了,部分centos系统已经安装了的openjava环境,但是很多项目不熟要求的是要必须是sun的java环境 2.yum ...

  2. 在ROS中使用OpenCV

    1.在工作空间下创建程序包 $ cd ~/catkin_ws/src$ catkin_create_pkg robot_vision roscpp std_msgs cv_bridge image_t ...

  3. Oracle 数据库纯dos代码操作

    1. 安装成功后进入DOS界面操作 在进行以下操作时,需启动Oracle服务. A.进入sql界面:开始--运行--cmd:输入sqlplus 回车 提示输入正确的用户名和密码 B.开始—>所有 ...

  4. jenkins持续集成python cases

    1. 官网2.7jenkins.war下载 http://mirrors.jenkins.io/war-stable/2.73.2/jenkins.war jdk-x86 linux 32bit适用  ...

  5. C++垃圾回收器的实现

    一.简单介绍 这是一个自己写C++垃圾自己主动回收器,用到的都是标准C++语法.採用了引用计数加mark-sweep的方法.在没有循环引用的情况下,引用计数能够保证垃圾实时得到回收:对于有循环引用的情 ...

  6. mysql关于视图的用法以及作用

    关于视图的用法以及作用. 作用一: 提高了重用性,就像一个函数.如果要频繁获取user的name和goods的name.就应该使用以下sql语言.示例: select a.name as userna ...

  7. 使用C语言给php写扩展

    1.在php源码路径的ext文件夹下,新建一个extend_test.def文件,编辑文件内容为 string my_test_function(string str,int n) 2.在当前目录执行 ...

  8. 使用Android studio搭建Android环境

    最近安装Android studio遇到了很多问题,现在总结一下安装过程 因为我的电脑是AMD的cpu,好像不能使用虚拟机(具体原因不知道),所以我使用 软件+手机  去开发APP 先说一下使用And ...

  9. 2017-2018-2 《网络对抗技术》 20155322 Exp 5 MSF基础应用

    [-= 博客目录 =-] 1-实践目标 1.1-实践介绍 1.2-实践内容 1.3-实践要求 2-实践过程 2.1-情报收集 2.2-主动攻击实践-ms08_067 2.3-浏览器攻击实践-many* ...

  10. EDB*Plus的当前路径问题

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL基础知识与基本操作索引页     回到顶级页面:PostgreSQL索引页 [作者 高健@博客园  luckyjackg ...