<!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. unittest中setUp与setUpClass执行顺序

    最基础的概念 1.setUP(self)看下面的执行顺序 import unittest class TestGo(unittest.TestCase): def setUp(self): print ...

  2. PAT乙级1016

    1016 部分A+B (15 分)   正整数 A 的“D​A​​(为 1 位整数)部分”定义为由 A 中所有 D​A​​ 组成的新整数 P​A​​.例如:给定 A=3862767,D​A​​=6,则 ...

  3. CSS属性之word-break:break-all强制性换行

       一般情况下,元素拥有默认的white-space:normal(自动换行,PS:不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空 ...

  4. ubuntu下安装eclipse IDE for C/C++ developers

     序 linux的GUI和windos比起来实在逊色,虽然它的终端模式(命令行模式)非常强大.linux发行版ubuntu的GUI相对其他版本要华丽一些,所以最近由redhat转向ubuntu进行li ...

  5. 旧贴-在 win7 / win8 下安装苹果系统 (懒人版)

    前言 该文转载自远景论坛,发布时间2012年,仅供学习参考 这篇安装教程的素材在国庆就准备好了,但那时学习任务比较重,没有时间发帖,一直拖到现在.趁这个周末有空,赶紧写完它,希望能帮助一些景友. 论坛 ...

  6. php生成带自定义logo和带二维码跳转自定义地址的二维码

    index.php<?phpheader('Content-type:text/html;charset=UTF-8');// 指定允许其他域名访问header('Access-Control- ...

  7. ASP.NET中关于XML的AJAX的读取与删除

    一个XML文件,名称就暂定为GroupStudents.xml吧,内容如下: <?xml version="1.0" encoding="utf-8"?& ...

  8. 复制web项目时注意修改web项目名

    改web项目的项目名可以右击->properties->搜索web找到settings->修改context name

  9. 20155238 2016-2017-2 《Java程序设计》第六周学习总结

    教材学习内容总结 第十章 串流设计 输入串流:将数据从来源取出. 输出串流:将数据写入目的地. 输入串流代表对象为java.io.InputStream实例 输出串流代表对象为java.io.Outp ...

  10. 2015306 白皎 《网络攻防》Exp1 进阶

    2015306 白皎 <网络攻防>Exp1 进阶 Task1 64位shellcode的编写及注入 - 自己编写一个64位shellcode.参考shellcode指导. - 自己编写一个 ...