写页面的时候遇到了一个小小的问题，如何让div中一行超链接文字只显示一行，多余的文字隐藏并加上省略号，悬浮时隐藏的文字显示出来？解决问题时发现了css3的一个新标签  text-overflow  ，其属性规定当文本溢出包含元素时发生的事情。语法如下：

  text-overflow: clip|ellipsis|string;
　　
  代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>demo</title>
<style>
div{
white-space: nowrap;   //规定段落中的文本不进行换行
text-overflow:ellipsis;
overflow:hidden;
}
div:hover{
overflow: visible;
font-weight: bold;
}
</style>
</head>
<body>
<div style="width:100px;border:1px solid red;">
<a href="#">文本文本文本文本文本文本文本</a>
</div>
</body>
</html>

如何让div中的文字只显示一行，多余的文字隐藏并加上省略号（超链接形式）的更多相关文章

  1. CSS控制文字只显示一行 超出部分显示省略号

         <p style="width: 120px; height: 50px; border: 1px solid blue; white-space: nowrap; over ...

  2. CSS控制文字只显示一行，超出部分显示省略号

    <p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"&g ...

  3. HTML+css 文字只显示一行

    电脑端 设置行高,超出隐藏 p{ width: 80%; height: 16px; line-height: 16px; display: block; overflow: hidden; text ...

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

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

  5. ScrollView中嵌套GridView，ListView只显示一行的解决办法

    转载:http://blog.csdn.net/luohai859/article/details/39347583 关于为什么只显示一行,个人理解是:如果单独使用GridView和ListView, ...

  6. RecyclerView, ListView 只显示一行内容 问题解决

    Adapter 中的data有多行,但是RecyclerView只显示一行. 原因出在item的layout xml, 用了自动生成的RelativeLayout, 她的默认高度height属性是ma ...

  7. ScrollView嵌套ListView只显示一行

    错误描述 ScrollView嵌套ListView中导致ListView高度计算不正确,只显示一行. 解决方法 重写ListView的onMeasure方法,代码如下. @Override publi ...

  8. NestedScrollView嵌套ListView时只显示一行的解决方法

    在使用CoordinatorLayout和AppBarLayout实现嵌套滑动的时候,出现listview没有嵌套滑动: 如果要实现嵌套滑动,则需要添加NestedScrollView,但是结果发现l ...

  9. ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法(转)

    ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法 分类: android应用开发2013-12-19 09:40 1045人阅读 评论(3) 收藏 举报 AndroidS ...

随机推荐

  1. tensorflow目标检测API之训练自己的数据集

    1.训练文件的配置 将生成的csv和record文件都放在新建的mydata文件夹下,并打开object_detection文件夹下的data文件夹,复制一个后缀为.pbtxt的文件到mtdata文件 ...

  2. 03大端和小端（Big endian and Little endian）

    1.大端和小端的问题 ​ 对于整型.长整型等数据类型,Big endian 认为第一个字节是最高位字节(按照从低地址到高地址的顺序存放数据的高位字节到低位字节),而 Little endian 则相反 ...

  3. Ubuntu 开机启动不执行

    解决方案: 1.将/etc/rc.local的命令改成更加兼容的模式,将"#!/bin/sh"改为"#!/bin/bash" 2.将/bin/sh重新链接到/b ...

  4. 学习pwn的一些指导

    使用ret2libc攻击方法绕过数据执行保护 http://blog.csdn.net/linyt/article/details/43643499 格式化字符串利用小结 http://www.cnb ...

  5. poj-2524 ubiquitous religions(并查集）

    Time limit5000 ms Memory limit65536 kB There are so many different religions in the world today that ...

  6. Educational Codeforces Round 41 E. Tufurama (961E)

    [题解] 第一眼看题飞快地想到一种做法,然后假掉了. 这道题其实是主席树的模板题来着.但是也有别的水法. 我们可以发现每个位置的查询区间是[1,min(a[i],i-1)],所以我们可以把查询区间按照 ...

  7. python基础学习笔记——正则表达式

    1.什么是正则? 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则.(在Python中)它内嵌在Python中,并通过 r ...

  8. python week08 并发编程之多进程--理论部分

    一 什么是进程 进程:正在进行的一个过程或者说一个任务.       而负责执行任务则是cpu. 举例(单核+多道,实现多个进程的并发执行): Jame在一个时间段内有很多任务要做:python学习任 ...

  9. day03_07 变量的重新赋值01

    在cmd中退出python,需要使用quit()命令 name = "Alex Li" name2 = name print(name,name2) name = "Ja ...

  10. Flask_Blueprint(蓝图)

    在Flask中,我们需要一个可以模块化的方法. Flask自身给我们提供的就是Blueprint方法. 通过Blueprint,可以让我们实现模块化组织程序结构. 官方文档解释: 代码结构: 核心代码 ...