写页面的时候遇到了一个小小的问题，如何让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. mysql 添加数据如果数据存在就更新ON DUPLICATE KEY UPDATE和REPLACE INTO

    #下面建立game表,设置name值为唯一索引. CREATE TABLE `game` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar( ...

  2. Java-JFrame可视化开发

    Java-JFrame可视化开发的一般步骤 JFrame可以做出类似于QQ登录功能的窗体,通过JFrame可以利用Java代码实现窗体功能,一般用于CS项目的C(客户端)的开发: 利用JFrame可以 ...

  3. python3 输入某年某月某日，判断这一天是这一年的第几天？

    题目 输入某年某月某日,判断这一天是这一年的第几天? 程序分析 特殊情况,闰年时需考虑二月多加一天. 代码: import calendar year = int(input("Year:& ...

  4. sql 单表/多表查询去除重复记录

    单表distinct 多表group by group by 必须放在 order by 和 limit之前,不然会报错 *************************************** ...

  5. leetcode-24-exercise

    506. Relative Ranks 解题思路: 使用priority_queue.它在插入时会将数据按照由大到小的顺序插入,自然排序了.所以插入时考虑插入pair<nums[i],i> ...

  6. R-codes-tips

    1. 在shell执行R文件 chmod 0755 file.R Rscript file.R 2.  载入数据 data(dune) 3. attach() 将data.frame添加到R的搜索路径 ...

  7. ACM训练联盟周赛 A. Teemo's bad day

    65536K   Today is a bad day. Teemo is scolded badly by his teacher because he didn't do his homework ...

  8. 合肥工业大学宣城校区大学生创新创业训练项目申报书：“基于Spark平台的人工智能知识的知识图谱构建”

  9. vmware10下载地址

    https://download3.vmware.com/software/wkst/file/VMware-Workstation-Full-10.0.1-1379776.x86_64.bundle ...

  10. nw335 debian sid x86-64 -- 1 需求介绍

    自己的台式机上面有有线网卡,路由器在客厅,托一条长长的线,关门也不方便.没有选择PCI无线网卡,没有选择nano类型的迷你网卡.买了nw335,带一条5DB天线,信号应该会好点.于是,开始了在debi ...