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

 <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高并发秒杀API之web层

    第1章 设计Restful接口 1.1前端交互流程设计 1.2 学习Restful接口设计 什么是Restful?它就是一种优雅的URI表述方式,用来设计我们资源的访问URL.通过这个URL的设计,我 ...

  2. 他山之石--机器学习 step by step

    练习使用的数据 diabetes.csv 备用百度网盘地址 输入变量与输出变量均为连续变量的预测问题是回归问题: 输出变量为有限个离散变量的预测问题成为分类问题: 其实回归问题和分类问题的本质一样,都 ...

  3. [Android] Android 使用 Greendao 操作 db sqlite(2)-- 封装DaoUtils类

    继续接上文: Android 使用 Greendao 操作 db sqlite(1)-- 直接在MainActivity中调用 布局文件同上文一致,这里就不贴了. 一.封装DaoUtils类 User ...

  4. 百度编辑器 ueditor 会屏蔽过滤 body html head DOCTYPE ... 的解决办法

    百度编辑器很强,但有时候复制到html里时,会带有 body  html head 等标签,切到视图时,内容都不见了 是因为白名单 解决办法: 我测的是1.4.3版本 在 ueditor.config ...

  5. hadoop的基本概念 伪分布式hadoop集群的安装 hdfs mapreduce的演示

    hadoop 解决问题: 海量数据存储(HDFS) 海量数据的分析(MapReduce) 资源管理调度(YARN)

  6. C# string 保留数字英文字母

    using System; using System.Collections.Generic; using System.Linq; using System.Text.RegularExpressi ...

  7. memset赋值

    比较神奇的事情 可能和二进制有关系吧 #include<bits/stdc++.h> using namespace std; ]; int main(){ memset(f,,sizeo ...

  8. zookeeper客户端 zkCli使用及常用命令

    上篇(http://www.cnblogs.com/yangzhenlong/p/8270835.html)zk伪集群搭建好后,使用zkCli连接zk服务 切换到zk1/bin 目录,执行zkCli. ...

  9. ubuntu 中文变成小方框 口

    今天打开ubuntu所有原来是中文的地方都变成口口口口    ,下面是解决办法,其实很简单,更新一下字体库就可以了 1. 进入到字体的目录下 /usr/share/fonts/  ,输入下面的命令 c ...

  10. Java SE之正则表达式四：获取

    /** * * @author Zen Johnny * @date 2018年4月29日 下午4:51:08 * */ package demo.regex; import java.util.re ...