代码： overflow: hidden; white-space: nowrap;  text-overflow: ellipsis;

重点代码：text-overflow: ellipsis;

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

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

<html>

<head>

    <title> css 超出部分显示省略号</title>

</head>

<body>

    <div id="div1" style="width: 100px; background: #ccc; overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; ">省略号啊省略号啊省略号啊</div>

    重点样式是  text-overflow: ellipsis; <br />

    text-ellipsis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的

效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

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

text-overflow: ellipsis）。

</body>

</html>

css 超出部分显示省略号的更多相关文章

  1. css超出隐藏显示省略号怎么设置？

    当我们在进行网页前端开发的时候,一般获取文章标题,然后一行一行的显示.但是当标题过长的时候,就会造成换行显示.还有显示部分文本信息时,如果全部显示就过于繁琐,会带来不会的网页体验感.虽然我们可以使用o ...

  2. CSS超出部分显示省略号…代码

    让DIV,LI等元素超出部分文字用省略号…显示. 示例: 兼容IE/Firefox/Chrome 代码: display:block;white-space:nowrap; overflow:hidd ...

  3. css 超出部分显示省略号 汇总

    单行: 加宽度 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行: display: -webkit-box; -we ...

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

    单行文本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

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

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

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

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

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

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

  8. css文本强制两行超出就显示省略号,不显示省略号

    1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...

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

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

随机推荐

  1. 一个简单的将GUI程序的log信息输出到关联的Console窗口中（AllocConsole SetConsoleTitle WriteConsole 最后用ShowWindow(GetConsoleWindow)进行显示）

    // .h 文件 #pragma once class CConsoleDump { public: explicit CConsoleDump(LPCTSTR lpszWindowTitle = N ...

  2. [iOS]开发者证书和描述文件的作用

    先说下证书吧. 然后是描述文件

  3. PCL—低层次视觉—点云分割（基于形态学）

    1.航空测量与点云的形态学 航空测量是对地形地貌进行测量的一种高效手段.生成地形三维形貌一直是地球学,测量学的研究重点.但对于城市,森林,等独特地形来说,航空测量会受到影响.因为土地表面的树,地面上的 ...

  4. OpenCV源码阅读(3)---base.hpp

    base.h处于core模块中,是OpenCV的核心类.其作用是定义了OpenCV的基本错误类型,在程序运行出现错误是抛出错误,防止数据溢出.总而言之,其功能主要是考虑程序的健壮性. 头文件 #ifn ...

  5. Java API —— Pattern类

    正则表达式     写一个功能实现QQ号码的校验. import java.util.Scanner; public class RegexDemo01 { public static void ma ...

  6. c# FastReport开发报表

    本文介绍c#应用FastReport开发报表,因此首先附该工具下载地址:http://download.csdn.net/detail/hws1058648831a/6378499 下载解压后可以直接 ...

  7. [置顶] Android系统五大布局详解Layout

    我们知道Android系统应用程序一般是由多个Activity组成,而这些Activity以视图的形式展现在我们面前,视图都是由一个一个的组件构成的.组件就是我们常见的Button.TextEdit等 ...

  8. C++ STL之排序算法

    排序算法和查找算法差不多,也涉及到迭代器区间问题,关于该问题的注意事项就不在啰嗦了 一.全部排序sort.stable_sort sort是一种不稳定排序,使用时需要包含头文件algorithm 默认 ...

  9. BCB遍历所有窗体的组件

    for(iFormIdx=0; iFormIdx<Screen->FormCount; iFormIdx++) { TForm *pForm = Screen->Forms[iFor ...

  10. 【转载】Java垃圾回收内存清理相关（虚拟机书第三章），GC日志的理解，CPU时间、墙钟时间的介绍

    主要看<深入理解Java虚拟机> 第三张 P84 开始是垃圾收集相关. 1. 1960年诞生于MIT的Lisp是第一门采用垃圾回收的语言. 2. 程序计数器.虚拟机栈.本地方法栈3个区域随 ...