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

 <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. Java实现OPC通信

    1.PLC和OPC 使用的PLC:西门子的S7 300,具体型号如下图 使用的OPC server软件: 模拟仿真用的 MatrikonOPCSimulation(50M),百度网盘,密码: mcur ...

  2. java中变量关系

  3. Windows环境手动DOS命令构建apk文件

    第一步 抽取资源id,生成R.java aapt p[ackage] -f [-A <assets>] -S <res> -M <AndroidManifest.xml& ...

  4. [译]SQL SERVER 2016 – Temporal Tables

    原文 Temporal Table是SQL Server2016的新特性.能存储你表里面任意时间点的数据信息. 换句话说,如果你针对一张表执行任何更新或者删除操作,老数据会被新数据覆盖,下次查询的时候 ...

  5. Immunity Debugger学习 二

    1.Exploit开发 发现漏洞只是一个开始,在你完成利用程序之前,还有很长一段路要走.不过Immunity专门为了这项任务做了许多专门设计,相信能帮你减少不少痛苦.接下来我们开发一些PyComman ...

  6. Docker exec 宿主对容器执行命令 - 五

    Docker  下  exec  从宿主机对容器执行命名操作 docker exec -it # 交互可以进入容器 ; exec 也可以在宿主机对容器执行命令: docker attach # 也是可 ...

  7. luogu P3767 膜法

    传送门 这题如果没有删除操作,可以直接使用可持久化并查集 注意到这种可持久化的依赖关系(是这样说的把)是一棵树,然后对于一个点,自己的操作会影响自己的那棵子树,并且如果是删除操作,就会使得一个子树没有 ...

  8. python中时间的转换和使用datetime

    模块 一个完整大型的python程序是由模块和包的形式组织起来的,可见模块在python中的重要性.模块是一种组织型式,它许多有关联(关系)的代码组织放到单独的独立文件中.简单的说,可以把模块理解为一 ...

  9. 5-4日 socket套接字

    1,socket定义 Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Socket接口后面 ...

  10. Java创建文件和文件夹

    java代码: import java.io.*;//导入所需的包public class IOTest {//类 public static void main(String[] args){//主 ...