<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>CSS省略号代码</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        body

        {

            padding: 10px;

            font-family: Arial;

        }

        #ididid

        {

            position: absolute;

            width: 150px;

            height: 20px;

            line-height: 20px;

            text-overflow: ellipsis;

            white-space: normal;

            white-space: nowrap;

            overflow: hidden;

        }

        #ididid span

        {

            position: absolute;

            top: 0;

            right: 0;

            display: block;

            float: left;

        }

        #ididid span:after

        {

            content: "...";

        }

    </style>

</head>

<body>

<div id="ididid">

    易网时代——电脑教程丰富的网络学院<span></span></div>

</body>

</html>

HTML5--div、span超出部分省略号显示的更多相关文章

  1. css实现文本超出部分省略号显示

    一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现: div { // 单行 white-space: nowrap; overflow: hidden; tex ...

  2. CSS div内文字显示两行，超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...

  3. CSS文本单行或者多行超出区域省略号(...)显示方法

    单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...

  4. div内容超出后自动显示滚动条

    一. <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢,否则不 ...

  5. css文本截字，超出文本省略号显示

    一.单行文本截字 p { text-overflow: ellipsis;/*显示省略号代替裁剪的文本*/ white-space: nowrap;/*空白处理方式 不换行*/ overflow: h ...

  6. 微信小程序 实现多行文字 超出部分省略号显示

    在开发小程序: 澳买 的 时候 遇到一个棘手的问题: 当搜索澳洲产品,获取产品列表的时候,有时候产品的名称翻译成中文特别长 我们不能全部在有限的列表里面把产品名都显示出来,这样格式不好控制,显示 出来 ...

  7. css 实现div内显示两行或三行，超出部分用省略号显示

    一.div内显示一行,超出部分用省略号显示 white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis; 二.div内显示 ...

  8. h5文字超出，两行显示，超出显示省略号

    最近接到一个需求,要求商场导航里的文字最多显示两行,超出两行的省略号显示,查一些资料,又根据自己的需求,改了很多,直接上代码吧 <html> <head> <style ...

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

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

随机推荐

  1. enumerate（）

    今天我们学一个单词 enumerate 后面加个括号 他就不是单词了,那是什么呢 来看一下 enumerate() a = ('htc', 'oppo', 'vivo', 'huawei', 'mi' ...

  2. ZeroMQ接口函数之 ：zmq_msg_init_size - 使用一个指定的空间大小初始化ZMQ消息对象

    ZeroMQ 官方地址 :http://api.zeromq.org/4-1:zmq_msg_init_size zmq_msg_init_size(3) ØMQ Manual - ØMQ/3.2.5 ...

  3. [LintCode] Reverse Words in a String 翻转字符串中的单词

    Given an input string, reverse the string word by word. For example,Given s = "the sky is blue& ...

  4. Python In Action:三、再来一个扩展例子，保证不难

    在窗口显示一张图片,代码如下: import wx class Frame(wx.Frame): """Frame class that displays an imag ...

  5. Django视图与网址

    Django中网址是写在 urls.py 文件中,用正则表达式对应 views.py 中的一个函数(或者generic类),我们用一个项目来演示. 下载本节所有源代码: 学习编程最好的办法就是动手敲代 ...

  6. Codeforces554B:Ohana Cleans Up

    B. Ohana Cleans Up Time Limit: 2000ms Memory Limit: 262144KB 64-bit integer IO format: %I64d      Ja ...

  7. test hypertext links for validity, accessibility, and recent modification

    https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html The HEAD method is identical to GET except th ...

  8. Urimoo做试卷

    Urimoo做试卷 题目描述 SBJ最近收到了n张数学卷子,这些卷子的标号为0-n−1,他不想写这些卷子,于是他的好朋友SCX热心地想要帮他撕掉n−1张卷子.SBJ很高兴,但是SCX说,他撕试卷的顺序 ...

  9. win7下利用VM8安装CentOS6.3配置静态IP上网

    1 环境 宿主主机64位win7,利用VM8安装的64位CentOS6.3,64位的.在VM中配置CentOS的IP为静态,可上互联网.具体配置过程如下. 2 步骤 首先将VM的setting选项中, ...

  10. java中的Comparable接口

    类对象之间比较"大小"往往是很有用的操作,比如让对象数组排序时,就需要依赖比较操作.对于不同的类有不同的语义.如Student类,比较2个学生对象可以比较他们的score分数来评判 ...