开发中经常会遇见这样的问题，一段文字或者一段标题过长了，就让超出长度的部分益...替换。具体怎么做的呢？直接上代码：

 <style>

        *{

            margin: 0;

            padding: 0;

        }

        .box{

            width: 200px;

            height: 224px;

            padding: 10px;

            box-sizing: border-box;

            border: 1px solid #ebebeb;

            border-radius: 4px;

            position: absolute;

            top: 50px;

            left: 50px;

        }

        .pic{

            width: 180px;

            height: 180px;

            background: #10a3e8;

        }

        .title{

            margin-top: 10px;

            font-size: 14px;

            text-align: center;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

            -webkit-transition: all .3s ease-out;

            -moz-transition: all .3s ease-out;

            -o-transition: all .3s ease-out;

            -ms-transition: all .3s ease-out;

            transition: all .3s ease-out;

        }

    </style>

</head>

<body>

    <h3 style="margin-left: 50px;margin-top: 20px">鼠标悬停文字上，可显示隐藏文字</h3>

    <div class="box">

        <div class="pic"></div>

        <p class="title">

            <span class="text"></span>

        </p>

    </div>

    <div class="box" style="left: 300px">

        <div class="pic"></div>

        <p class="title">

            <span class="text">我是标题我是标题</span>

        </p>

　　最重要的熟悉就是上述代码高亮的部分，text-overflow 还有其他的属性，参考这里：http://www.w3school.com.cn/cssref/pr_text-overflow.asp

　　在加上一段js ,主要作用就是hover的时候，文字会以动画的方式出现，动画方式的css在上面已经写出来。下面的就是简单的js;

 $(function(){

           $(".title").hover(function(){

               var width_a = $(this).width();

               var width_b = $(this).find(".text").width();

               var indent_px = width_a - width_b;

               if( width_a <= width_b ){

                   $(this).css("text-indent",indent_px);

               }

           },function(){

               $(this).css("text-indent","0");

           });

        });

　　text-indent的属性是文字缩紧。以动画的方式文字缩紧，看上去就往左边进去一样。

如有错误之处，敬请批评指出

每日一句：We should accompany the people who we love to go out for a walk in sunny days.

翻译：在阳光明媚的日子里，我们应该陪我们爱的人出去散步。

css效果文字多了就...的更多相关文章

  1. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

  2. CSS 效果汇总

    只要决心够, 就能征服痛苦. 把一些常用的 CSS 效果记录下来 1. 利用 z-index :hover 显示层 github 效果地址>> 此效果主要利用 a:hover 来改变 sp ...

  3. CSS实现文字半透明显示在图片上方法

    CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...

  4. css图片+文字浮动（文字包围效果）

    css图片+文字浮动(文字包围效果): 在网页中,我们有时想实现这个效果,但是 <div id="test"> <img src="gdimages/0 ...

  5. 简单做出HTML5翻页效果文字特效

    之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transfor ...

  6. html使用css让文字超出部分用省略号三个点显示的方法案例

    html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...

  7. 前端研究CSS之文字与特殊符号元素结合的浏览器兼容性总结

    页面布局里总是会有类似 “文字 | 文字” 的设计样式,不同的浏览器存在严重偏差. 有兼容问题就要解决,下面总结了3种解决方案,分享给大家: 一.系统默认的样式 1.元素换行的段落 <div c ...

  8. css限制文字显示字数长度，超出部分自动用省略号显示,防止溢出到第二行

    为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...

  9. 伪元素选择器，选择器优先级，CSS修改文字属性，CSS修改字体属性，CSS修改其他属性

    伪元素选择器 未使用元素选择器的效果 第一行:伪元素选择器:选择部分内容 第二行:伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 ::selection:选择指定元 ...

随机推荐

  1. bzoj千题计划311：bzoj5017: [Snoi2017]炸弹（线段树优化tarjan构图）

    https://www.lydsy.com/JudgeOnline/problem.php?id=5017 暴力: 对于每一个炸弹,枚举所有的炸弹,看它爆炸能不能引爆那个炸弹 如果能,由这个炸弹向引爆 ...

  2. overlay网络隔离实验失败记录

    按照 https://www.cnblogs.com/CloudMan6/p/7341487.html进行操作,实验结果与老师文章中的正好相反,不同 overlay 网络中的主机可以通信,验证部分见下 ...

  3. 自学python 1.

    1.变量命名规范 1.数字,字母,下划线 2.不能数字开头和纯数字 3.要有意义 4.不要太长 5.驼峰和下划线 6.不要用中文 7.不能用关键字 8.区分大小写2.name = input(&quo ...

  4. C JAVA你可能不知道的那些编程细节

    关于printf的格式化字符 %* *与其它占位符结合使用, *将首先被一个 int 变量值代替后再被格式化. 如 printf("%.*s.", 2, "Hello&q ...

  5. SQL Server进阶（十一）可编程对象——变量、 批、流元素、 游标

    变量 --------------------------------------------------------------------- -- Variables -------------- ...

  6. Groovy的脚本统一于类的世界

    http://groovy-lang.org/structure.html 3.2. Script class A script is always compiled into a class. Th ...

  7. ****** 四十 ******、软设笔记【网络基础】-Internet和Intranet基础

    Internet和Intranet基础 一.网络地址及子网掩码 1.IP地址结构及类别 IP地址是由32位二进制数,即4个字节组成的,由网络号和主机号两个字段组成. 网络号的位数决定了可以分配的网络数 ...

  8. GCC编译器原理（二）------编译原理一：ELF文件（2）

    四. ELF 文件格式分析 ELF文件(目标文件)格式主要四种: 可重定向文件: 文件保存着代码和适当的数据,用来和其他的目标文件一起来创建一个可执行文件或者是一个共享目标文件.(目标文件或者静态库文 ...

  9. applicationContext.xml配置Spring样板

    <?xml version="1.0" encoding="UTF-8" ?><beans xmlns:xsi="http://ww ...

  10. MySQL自动编号与主键

    1.自动编号(AUTO_INCREMENT),必须与主键组合使用 默认情况下,起始值为1,增量也为1. 2.主键(PRIMARY KEY) 每张数据表只能存在一个主键 主键保证记录的唯一性 主键自动为 ...