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

 <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. mysql关联模糊查询他表字段

    如下:订单表关联了用户的id(多个),要根据用户名模糊查询订单信息,但是订单表只有id.创建视图用不着,咱也没权限.于是如下 SELECT * FROM ( SELECT cu.id AS 'id', ...

  2. java NIO入门【原】

    server package com.server; import java.net.InetSocketAddress; import java.nio.ByteBuffer; import jav ...

  3. Address already in use : connect 的解决办法

    最近做百万次通讯测试,在做并发测试时发现eclipse的控制台输出超过10万条信息时开始有报错内容 Address already in use : connect 这种错误多了后紧接着eclipse ...

  4. python-虚拟环境搭建

    虚拟环境 需求:        --公司之有一台服务器        -目前运行这一个5年前开发的Django项目,基于1.5        -现在要基于Django2.0开发一套程序         ...

  5. 我的长大app开发教程第二弹：完成ContentFragment底部按钮

    在开始之前,先上一张效果图 突然发现有点知乎的味道...的确..知乎灰#989898,知乎蓝15,136,235(逃.... 1.学P图 想我大一的时候也用过不少Adobe的软件,昨天重新打开我的Ph ...

  6. [译]在vuejs中使用任意js库

    原文 全局变量 最naive的办法是通过附加类库到window对象,使之成为全局变量: entry.js window._ = require('lodash'); MyComponent.vue e ...

  7. 使用PHP+MySql操作——实现微信投票功能

    1. 投票主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  8. Docker 添加环境系统文件配置

    在 docker 启动文件添加默认环境系统配置 " /etc/default/docker ": 添加  Environment File 配置: # vi /usr/lib/sy ...

  9. PHP:产生不反复随机数的方法

    来源:http://www.ido321.com/1217.html 不管是Web应用,还是WAP或者移动应用,随机数都有其用武之地.在近期接触的几个小项目中.我也经常须要和随机数或者随机数组打交道, ...

  10. Coursera, Big Data 1, Introduction (week 1/2)

    Status: week 2 done. Week 1, 主要讲了大数据的的来源 - 机器产生的数据,人产生的数据(比如社交软件上的update, 一般是unstructed data), 组织产生的 ...