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:选择指定元 ...
随机推荐
- Java OPC 代码
这是我项目的代码,还是容易理解的,记录备份一下 1.任务详情 Java实现OPC通信的代码实现 最终实现对西门子的S7-300的PLC变量的值读写 2.实现情况 使用utgard实现通信:Java实现 ...
- spring cloud学习填坑笔记
最近在学习spring cloud,由于学习资料具有普遍性,部分应个人原因导致的小细节问题,往往很难找到解决的办法.这特别记录一下自己遇到的一些问题. 一.eureka-server加入securit ...
- MVC的了解
MVC是一种架构模式,程序分层,分工合作,各层既相互独立,有协同工作. MVC:Model+View+Controller Model层:业务数据的信息表示,关注支撑业务的信息构成,通常是多个业务实体 ...
- 队列 Queue 与 生产者消费模型
队列:先进先出 # from multiprocessing import Queue # Q = Queue(4) # Q.put('a') # Q.put('b') # Q.put('b') # ...
- Image转Base64
今天和一个朋友联调图片转Base64时发现一个问题 public static string ImageToBase64(Image img) { BinaryFormatter binFormatt ...
- 理解PHP中的会话控制
会话控制是一种跟踪用户的通信方式,使用会话控制主要基于以下几点:由于http协议的无状态性,使得不能通过协议来建立两次请求之间的关联:对于通常的页面之间的数据传递方式get和post而言,主要处理参数 ...
- 5-24 css内容的补充
1,标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 标准文档流下 有哪些微观现 ...
- 【译】第一篇 SQL Server安全概述
本篇文章是SQL Server安全系列的第一篇,详细内容请参考原文. Relational databases are used in an amazing variety of applicatio ...
- scss转css的过程中 转化问题
如果 在转化过程中语法没有问题的话 测试一下是否是文件的bom头的问题
- ionic编译安卓App
安装node.js 安装Android Studio 运行Android Studio安装SDK,在D:\AndroidSDK 配置SDK环境 ANDROID_HOME=D:\AndroidSDK P ...