css效果文字多了就...
开发中经常会遇见这样的问题，一段文字或者一段标题过长了，就让超出长度的部分益...替换。具体怎么做的呢？直接上代码：
<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效果文字多了就...的更多相关文章
- CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- CSS 效果汇总
只要决心够, 就能征服痛苦. 把一些常用的 CSS 效果记录下来 1. 利用 z-index :hover 显示层 github 效果地址>> 此效果主要利用 a:hover 来改变 sp ...
- CSS实现文字半透明显示在图片上方法
CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...
- css图片+文字浮动（文字包围效果）
css图片+文字浮动(文字包围效果): 在网页中,我们有时想实现这个效果,但是 <div id="test"> <img src="gdimages/0 ...
- 简单做出HTML5翻页效果文字特效
之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transfor ...
- html使用css让文字超出部分用省略号三个点显示的方法案例
html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...
- 前端研究CSS之文字与特殊符号元素结合的浏览器兼容性总结
页面布局里总是会有类似 “文字 | 文字” 的设计样式,不同的浏览器存在严重偏差. 有兼容问题就要解决,下面总结了3种解决方案,分享给大家: 一.系统默认的样式 1.元素换行的段落 <div c ...
- css限制文字显示字数长度，超出部分自动用省略号显示,防止溢出到第二行
为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...
- 伪元素选择器，选择器优先级，CSS修改文字属性，CSS修改字体属性，CSS修改其他属性
伪元素选择器 未使用元素选择器的效果 第一行:伪元素选择器:选择部分内容 第二行:伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 ::selection:选择指定元 ...
随机推荐
- vue基于组件实现简单的todolist
把todolist拆分为header.footer.list三个模块 index文件 <!DOCTYPE html> <html lang="en"> &l ...
- VS WebDev.WebServer40
vs2010下有一个WebDev.WebServer40工具,可以直接拿来当服务器用,这样就不用再安装iis了.位置在 C:\Program Files (x86)\Common Files\micr ...
- 万能五笔输入法"@相反
经过查找资料,发现是因为键盘使用的英国导致,改为美国解决,其他输入法没发现这个问题.
- [译]使用mediatR的notification来扩展的的应用
原文 你不希望在controller里面出现任何领域知识 开发者经常有这样的疑问"这个代码应该放在哪呢?"应该使用仓储还是query类?.... 怎么去实现职责分离和单一职责呢? ...
- TensorFlow从入门到理解（五）：你的第一个循环神经网络RNN（回归例子）
运行代码: import tensorflow as tf import numpy as np import matplotlib.pyplot as plt BATCH_START = 0 TIM ...
- Codeforces712E
传送门 here 题意: 有n个赌场,第i个赌场的胜率为$ P_i$,在第i个赌场若取胜则到达第$ i+1$个赌场,反之到达第$ i-1$个赌场 定义统治赌场$ L...R$为从赌场$ L$开始,从赌 ...
- Django REST framework 第二章 Request and Response
此章节开始真正的撰写REST framework的核心代码,介绍一系列必要的建立设计 Request Objects REST framework介绍了一个Request对象用来扩展常规的HttpRe ...
- Flask表单(form)的应用
导入模块request模块 #指定请求方式,使用methods属性 @app.route("/",methods=['GET','POST']) def index(): #判断c ...
- jquery和javascript的区别
jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单,为了说明区别,下面与大家分享下JavaScript 与JQuery 常用方法比较 jquery 就对j ...
- 7.4mybatis整合ehcache(mybatis无法实现分布式缓存必须和其他缓存框架整合)
<\mybatis\day02\14查询缓存-二级缓存-整合ehcache.av> mybatis的缓存机制(一级缓存二级缓存和刷新缓存)和mybatis整合ehcache-- 这里有做本 ...