<!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. B. Vile Grasshoppers

    http://codeforces.com/problemset/problem/937/B The weather is fine today and hence it's high time to ...

  2. P1446 [HNOI2008]Cards

    题目描述 小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目前小春只有3种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun很快就给出了答案. 进一步,小春要求染出Sr张红色,Sb张蓝 ...

  3. iOS：WKWebView（19-01-31更）

    以前用得不多,先开一篇,以后有遇到再补充. 1.返回 2.JS 调用 OC 3.获取.修改.添加网页信息 1.返回 if (self.mWebView.canGoBack == YES) { [sel ...

  4. pc端js常用方法

    var common = {}; /** * [pageMask ajax统一请求] * @return {[type]} [description] */ common.pageMask = fun ...

  5. 简单利用Clover四叶草安装U盘安装黑苹果

    配置是I5-7600K+技嘉Z270X-UD3+GTX 1050+简单利用Clover四叶草安装U盘安装黑苹果 <ignore_js_op><ignore_js_op> 成功黑 ...

  6. GoldData学习实例-采集官网新闻数据

    概述 在本节中,我们将讲述抓取政府官网地方新闻.并将抓取的新闻数据融入到以下两张数据表news_site和news中. news_site(新闻来源) 字段 类型 说明 id bigint 主键,自动 ...

  7. Docker-CE-CentOS安装&更新&卸载

    准备工作 系统准备 要求centos-7以上版本(包含7) 开启centos-extras 在线安装方式要求 卸载旧版本 卸载旧版本docker yum remove docker \ docker- ...

  8. lua协程实现

    协程是个很好的东西,它能做的事情与线程相似,区别在于:协程是使用者可控的,有API给使用者来暂停和继续执行,而线程由操作系统内核控制:另外,协程也更加轻量级.这样,在遇到某些可能阻塞的操作时,可以使用 ...

  9. 20155217 《信息安全系统设计基础》week16课堂测试

    20155217 <信息安全系统设计基础>week16课堂测试 在作业本上完成附图作业,要认真看题目要求并提交作业截图. 在set的过程中,我们需要将hour部分进行赋值,赋值我们采用&q ...

  10. 【转载】基于MFC的ActiveX控件开发(1)

    原文:http://iysm.net/?p=114 ActiveX 控件是基于组件对象模型 (COM) 的可重用软件组件,广泛应用于桌面及Web应用中.在VC下ActiveX控件的开发可以分为三种,一 ...