写页面的时候遇到了一个小小的问题，如何让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.环境安装配置 1.1 安装tensorflow 安装tensorflow不再仔细说明,但是版本一定要是1.9 1.2 下载Tensorflow object detection API  下载地址 ...

  2. logback写日志

    https://blog.csdn.net/u010128608/article/details/76618263 https://blog.csdn.net/zhuyucheng123/articl ...

  3. 单行代码实现xml转换成数组

    $string = '<xml> <return_code><![CDATA[SUCCESS]]></return_code> <return_m ...

  4. python--字符编码理解

    一.字符编码简史: 美国:1963年 ASCII (包含127个字符  占1个字节) 中国:1980年 GB2312 (收录7445个汉字,包括6763个汉字和682个其它符号) 1993年 GB13 ...

  5. k8s搭建WebUI--Dashborad管理界面

    k8s的webUI管理界面可以更好更直观更便捷的让我们去管理我们的k8s集群. 我们知道,由于某些原因我们无法直接拉取dashboard的镜像,但是国内有些人已经将镜像下载到dockerhub中可以给 ...

  6. matplotlib学习记录 一

    from matplotlib import pyplot as plt # 先实例一个图片,传入图片参数,10宽,5高,分辨率为80 image = plt.figure(figsize=(10,5 ...

  7. hihocoder1175 拓扑排序2

    #1175 : 拓扑排序·二 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho所在学校的校园网被黑客入侵并投放了病毒.这事在校内BBS上立刻引起了大家的讨论 ...

  8. 稀疏表（ST / Sparse Table）

    RMQ问题: 给定一个序列,每次询问一个区间最小值 / 最大值. 没有修改. //拿区间最大值来举例. memset(ans, -INF, sizeof(ans)); for (int i = 1; ...

  9. 00018_流程控制语句switch

    1.选择结构switch switch 条件语句也是一种很常用的选择语句,它和if条件语句不同,它只能针对某个表达式的值作出判断,从而决定程序执行哪一段代码. 2.switch语句的语法格式 swit ...

  10. ogre3D学习基础10 -- 键盘控制与鼠标控制（直接控制）

    要实现键盘,鼠标对场景的控制,首先要帧监听,就是在每一帧的渲染前后对它进行操作.这里的操作没有用到缓冲区,只是简单的直接获取. 1.这些步骤和前面的一样,直接上代码,操作还是在createScene函 ...