——html代码

<divid="d1" title="鼠标放上显示的文字"></div>

——css代码

#d1{

width:300px;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

/*兼容性*/

-webkit-text-overflow:ellipsis;

}

注：关键是给容器指定宽度，并且利用white-space:nowrap;属性阻止超出部分自动换行，省略号则是由text-overflow:ellipsis;实现的

文本太长，用省略号显示的css样式的更多相关文章

  1. 单行文字溢出和多行文字溢出省略号显示的CSS样式

    单行文字溢出,CSS样式 <h6 style="width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis ...

  2. css 样式控制文本过长实现省略号

    css 样式控制文本过长实现省略号 .topicTitle{ text-overflow: ellipsis; max-width: 75%; overflow: hidden; white-spac ...

  3. 实现文本在标签内平均分布的css样式

    这里有一个容器,添加了一段文字,想让它们平均分布达到标签flex布局的效果,而不是靠左.靠右或者居中显示. 添加样式: text-align: justify; text-align-last: ju ...

  4. 【css】文本超出行数以省略号显示

    //超出2行省略overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webk ...

  5. 【我的Android进阶之旅】Android Studio查看Logcat时，如果一行Log太长如何换行显示？

    使用Android Studio一段时间了,还有很多小技巧没有掌握.今天又发现了一个比较好用的小技巧,这里分享出来. 1.Android Studio默认显示效果 比如我们用Logcat来查看打印的L ...

  6. HTML中超出文本使用省略号替代的CSS样式

    a{ display: block; /*定义显示形式*/ overflow: hidden; /*截取超出字符*/ text-overflow: ellipsis; /*超出字符以…代替*/ whi ...

  7. 百度echarts使用--y轴label数字太长难以全部显示

    问题: 今天遇到个小问题,我们系统前端呈现使用了百度echarts.在绘制折线图的时候,因为数字过大,导致显示出现了问题. 解决方案: 左边y轴的值默认是根据我们填充进去的值来默认分割的,因为原始值就 ...

  8. framework7中一行的字如果过多就省略号显示的CSS写法

    .order-info-title { text-overflow: ellipsis !important; white-space: nowrap !important; overflow: hi ...

  9. Highcharts X轴名称太长，如何设置下面这种样式

      Highcharts所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过chart.inverted = true 可以让x, ...

随机推荐

  1. #leetcode刷题之路11-盛最多水的容器

    给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找出其中的两条线, ...

  2. 【TOJ 3005】Triangle（判断点是否在三角形内+卡精度）

    描述 Given the coordinates of the vertices of a triangle,And a point. You just need to judge whether t ...

  3. poj_1306_Combinations

    Computing the exact number of ways that N things can be taken M at a time can be a great challenge w ...

  4. Percona-Tookit工具包之pt-table-checksum

      Preface       The master-slave replication is commonly used in our product evironment.On account o ...

  5. 快速玩转linux(2)

    ssh是什么   SSH:secure shell 安全外壳协议 建立在应用层基础上的安全协议 可靠, 专为远程登录会话和其他网络服务提供安全性的协议. mark 客户端服务端都基本支持全平台 服务器 ...

  6. 添加fileinfo扩展

    首先声明:笔者用的是军哥的lnmp一键安装包!链接地址:https://lnmp.org 打开upgrade_php.sh配置文件[文件所在位置:~/lnmp1.4/include/upgrade_p ...

  7. Mina 组件介绍之 IoBuffer

    在Java NIO 中,ByteBuffer通常作为通信中传递消息的载体.而在Mina中,采用了IoBuffer代替ByteBuffer.Mina给出了不用ByteBuffer的两个主要理由: 1.  ...

  8. QQ群技术：0成本创建2000人QQ群技巧

    群人数,直接关系群权重;于排名,意义非凡;此法靠谱,笔者亲测. 就说这张图,这类关键词,要是没2000人群,不管你多流弊,你是做不上去滴. 于QQ群霸屏,笔者有太多的笔墨,各种排名技巧,阿力推推早前明 ...

  9. Python学习手册之控制结构（一）

    在上一篇文章中,我们对 Python 进行了简单介绍和介绍了 Python 的基本语法,现在我们继续介绍 Python 控制结构. 查看上一篇文章请点击:https://www.cnblogs.com ...

  10. Python爬虫爬取百度翻译之数据提取方法json

    工具:Python 3.6.5.PyCharm开发工具.Windows 10 操作系统 说明:本例为实现输入中文翻译为英文的小程序,适合Python爬虫的初学者一起学习,感兴趣的可以做英文翻译为中文的 ...