效果如下:

css代码:

overflow:hidden;
white-space: nowrap;
text-overflow:ellipsis;

解释:简单理解就是我要把文本限制在一行(white-space: nowrap;),肯定这一行是有限制的(width),并且你的溢出的部分要隐藏起来(overflow: hidden;),然后出现省略号( text-overflow: ellipsis)。

text-ellipsis是一个特殊的样式,有关解释是这样的:text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它 的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏 (overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。

Div内部的内容超出部分显示省略号(仅仅只有一行内容)的更多相关文章

  1. DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)

    如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...

  2. css设置内容超出后显示省略号

    1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...

  3. HTML5 元素文字超出部分显示省略号(支持多行),兼容几乎所有常用浏览器

    1,公共样式,在公共的 CSS 文件中加入以下内容  /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...

  4. css 超出部分显示省略号

    代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...

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

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

  6. Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  7. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  8. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  9. CSS实现单行、多行文本超出部分显示省略号

     单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...

随机推荐

  1. GATK软件介绍

    背景介绍 GATK全称是The Genome Analysis Toolkit,是Broad Institute(The Broad Institute, formerly the Broad Ins ...

  2. 【开源一个小工具】一键将网页内容推送到Kindle

    最近工作上稍微闲点,这一周利用下班时间写了一个小工具,其实功能挺简单但也小折腾了会. 工具名称:Simple Send to Kindle Github地址:https://github.com/zh ...

  3. box-sizing属性

    我们都知道,设置元素的padding或者margin属性时都会改变元素的width和height,传统的方法是将padding和margin的值考虑进去,运用数学的方法进行计算来加以调整,以便使布局不 ...

  4. JAVA 笔记

    一.Java基础以及面向对象编程1.float类型的数自动转换成double类型时,可能会出现前后不相等的情况,因为有些数不能够用有限的二进制位精确表示.2.右移>>右移,左边空出位以符号 ...

  5. Android学习笔记函数

    //调用新的Activity Intent intent=new Intent(MainActivity.this,Main2Activity.class); startActivity(intent ...

  6. php访问全局变量

    函数之外声明的变量拥有 Global 作用域,只能在函数以外进行访问. 函数内部声明的变量拥有 LOCAL 作用域,只能在函数内部进行访问. PHP 同时在名为 $GLOBALS[index] 的数组 ...

  7. android Activity基类通用方法

    public class BaseActivity extends Activity { Resources res; // 通用资源缩写 @Override protected void onCre ...

  8. JVM内存监控工具 Jvisualvm

    这个工具是官方提供的,直接在JDK工具包下的bin目录找找就可以找到,或者打开cmd直接输入"jvisualvm"即可打开该工具(配置好java环境变量). 需要在catalina ...

  9. c# random string

    var randomString= Path.GetRandomFileName(); 返回 ar1opgzw.1gp 详细 http://www.dotnetperls.com/random-str ...

  10. git 教程(11)--从远程库克隆

    上次我们讲了先有本地库,后有远程库的时候,如何关联远程库. 现在,假设我们从零开发,那么最好的方式是先创建远程库,然后,从远程库克隆. 首先,登陆GitHub,创建一个新的仓库,名字叫gitskill ...