文本溢出显示省略号，鼠标浮动查看全部内容

1、文本溢出显示省略号

2、鼠标浮动查看全部内容

1、文本溢出显示省略号

今天做项目时遇到一种需求：文本溢出截断省略，上网查阅了一下，还是挺简单的，但是考虑到自己疑似老年痴呆的大脑，就在这里整理一下，以备以后碰到这种同样的需求。如果是单行溢出显示省略可以使用如下代码：

div {  white-space:nowrap;  /* 设置文字在一行显示，不能换行 */  overflow: hidden;    /* 文字长度超出限定宽度，则隐藏超出的内容 */text-overflow: ellipsis;/* 规定当文本溢出时，显示省略符号来代表被修剪的文本 */
}

上述的三行代码所有浏览器基本上都支持，而且可以做到响应式截断，文本溢出范围才显示省略号，否则不显示省略号。

但有时候还需要考虑显示的行数，如：超出两行或三行才考虑内容溢出省略，就可以使用如下代码：

div {      overflow: hidden;text-overflow: ellipsis;display: -webkit-box;     /* 将对象作为弹性伸缩盒子模型显示 */      -webkit-line-clamp: 2;    /* 控制最多显示几行 */      -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
}

2、鼠标浮动查看全部内容

有隐藏就要有显示，不然谁知道省略的那部分文本具体内容是什么，我们可以通过 title 属性显示所有文本内容：

<!--如果title的内容是字面量，直接写就好了-->
<p class="ellipse" title="这里填写字符串内容">{{this.message}}</p><!--如果title的内容是变量，则需要通过v-bind绑定-->
<p class="ellipse" :title="通过v-bind:title绑定">{{this.message}}</p>

文本溢出显示省略号，鼠标浮动查看全部内容相关推荐

文本溢出显示省略号时展示‘查看更多’按钮
问题: 元素宽度100%,宽度会随着浏览器缩放而变化.元素内文本超过4行时显示省略号,同时展示'更多'按钮,点击更多按钮展示全部文本.如下图所示分析: 文本超出4行显示省略号可以通过display ...
2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
web前端基础 html5+css3（九.精灵图，字体图标，css三角，鼠标样式cursor，.轮廓线 outline，vertical-align，文本溢出显示省略号）
1.精灵图(有效减少服务器介绍和发送请求的次数,提高页面的加载速度) 将网页的小背景图像整合到一张大图中,这样服务器只需要请求一次就可以了 background-position (图片往坐标左边走) ...
关于文本溢出显示省略号、圣杯双飞翼布局、CSS Hack、PS基础、以及项目的一些规范
溢出显示省略号单行文本溢出显示省略号方法一: .box{width:100px; border:1px solid red; /* 设置内容不换行 */white-space:nowrap;/ ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
单行文本溢出显示省略号，单行文本溢出显示省略号
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
文本溢出显示省略号效果
在HTML页面中经常会遇到文本溢出,需要将超出的部分隐藏并显示省略号的情况,那么这个文本溢出显示省略号效果是怎么实现的呢?下面本篇文章就来给大家介绍一下使用CSS实现文本溢出显示省略号效果的方法,希望 ...
【用CSS让单行文本溢出显示省略号】
如何用CSS让单行文本溢出显示省略号 <style> p { 1.设置宽高 width:160px; height:20px; font:size:16px; background-col ...
CSS文本溢出显示省略号怎么实现？
前言我们经常会遇到网页中有文字溢出会显示省略号,那么这种效果怎么实现呢?本文分别介绍了单行文本溢出显示省略号和多行文本溢出显示省略号的实现方法. 一.单行文本溢出显示省略号代码示例: <!D ...

文本溢出显示省略号，鼠标浮动查看全部内容

1、文本溢出显示省略号

2、鼠标浮动查看全部内容

文本溢出显示省略号，鼠标浮动查看全部内容相关推荐

最新文章

热门文章