css零零散散的笔记
1.div根据内容自适应大小
效果图：
html：
<body>
<div class="parent">
<div class="children">欢迎来到蚂蚁部落，今天阳光不错！</div>
</div>
</body>
css：
<style media="screen">
.parent {
width: 400px;
height: 400px;
border: 1px solid red;
} .children {
border: 1px solid blue;
display: inline;
zoom:;
}
</style>
2.文本显示指定长度的汉字，超过部分用......代替(css和js两种实现方法)
效果图：
图中只有第一行的是用css实现的，后面的都是用js实现的。
html:
<body>
<div class="parent">
<a href="javascript:void(0)" title="今天天气好晴朗 处处好风光 好风光 蝴蝶儿忙 蜜蜂也忙 小鸟儿忙着 白云也忙">
<div class="text-overflow-ellipsis">
今天天气好晴朗 处处好风光 好风光 蝴蝶儿忙 蜜蜂也忙 小鸟儿忙着 白云也忙
</div>
</a>
</div>
<div class="parent_two">
<a href="javascript:void(0)" title="迪丽热巴·迪力木拉提" id='text_two' class="text_two">迪丽热巴·迪力木拉提 </a>
</div>
<div class="parent_three">
<a href="javascript:void(0)" title="迪丽" id='text_three' class="text_three">迪丽</a>
</div>
</body>
css:
<style media="screen">
.text-overflow-ellipsis:hover .text {
display: block;
position: absolute;
border: 1px solid pink;
left: 100px;
top: 50px;
padding: 3px;
} .text-overflow-ellipsis {
cursor: default;
margin-top: 20px;
width: 300px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} a {
text-decoration: none;
color: #000;
}
</style>
js:
<script type="text/javascript">
$(function() {
var text = $('#text_two').html();
if (text.length > 3) {
text = text.substring(0, 3);
$('#text_two').html(text + '...')
}
var text_three = $('#text_three').html();
if (text_three.length > 3) {
text_three = text_three.substring(0, 3);
$('#text_three').html(text_three + '...')
}
});
</script>
css零零散散的笔记的更多相关文章
- CSS揭秘读书笔记 （一）
CSS揭秘读书笔记 (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px solid hsla(0,0%,100%,.5); background: ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
- 《CSS揭秘》笔记（一）
前言 我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...
- CSS 3 学习笔记
css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal: 控制连续文本换行.break-word: 内容将在边界内换行.如果需要,词 ...
- css随堂笔记（三）
Css随堂笔记(三) 1 关于背景图片 A 设置背景图片:background-image:url(“图片的路径”): B 背景图片位置: background-position:1 方位名词 ...
- （2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5
1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...
- 《CSS世界》笔记二：盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...
- css 权威指南笔记（一）
零零散散接触css将近5年,俨然已经成为一个熟练工.如果不是换份工作,我不知道自己差的那么远:在qunar的转正review中我这种“知其然而不知其所以然” 的状况被标明,我才意识到我已停步不前近两年 ...
- HTML&CSS基础学习笔记1.32-选择器是什么
选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...
随机推荐
- 一篇关于apache commons类库的详解[转]
1.1. 开篇 在Java的世界,有很多(成千上万)开源的框架,有成功的,也有不那么成功的,有声名显赫的,也有默默无闻的.在我看来,成功而默默无闻的那些框架值得我们格外的尊敬和关注,Jakarta C ...
- linux环境下获取真实的ip地址
package inas.test; import java.net.Inet6Address; import java.net.InetAddress; import java.net.Networ ...
- SOA及分布式
结合领域驱动设计的SOA分布式软件架构 Windows平台分布式架构实践 - 负载均衡(下) 分享一个分布式消息总线,基于.NET Socket Tcp的发布-订阅框架,附代码下载 我终于深入参与了一 ...
- Effective STL读书笔记
Effective STL 读书笔记 本篇文字用于总结在阅读<Effective STL>时的笔记心得,只记录书上描写的,但自己尚未熟练掌握的知识点,不记录通用.常识类的知识点. STL按 ...
- CorelDRAW中如何分布对象
分布对象功能主要用来控制选择对象之间的距离,可以满足用户对均匀间距的要求,通常用于选择三个或三个以上的物体,将他们之间的距离平均分布.本教程将详解CorelDRAW中关于分布对象的操作. CorelD ...
- vs2010如何安装qt插件
Qt默认使用mingw编译,不支持VS编译器,因此,如果需要用VS开发,需要将Qt重新编译.前提:Qt已安装(http://qt.nokia.com/downloads-cn),VS已安装. 1.下载 ...
- mysql中使用show variables同时查询多个参数值?show variables的使用?
需求描述: 今天在查mysq关于连接数的问题,想要通过一个show variables命令同时查出来多个值.在此记录下. 操作过程: 1.通过show variables语句的like可以匹配多个值或 ...
- Linux Shell 通配符、元字符、转义符使用实例介绍
https://www.cnblogs.com/chengmo/archive/2010/10/17/1853344.html
- liunx（centos7 ） 免密码登录
centos7 1.准备两台机器 如:(A机器) 和 (B机器) A机器 删除(.ssh目录下文件 known_hosts) 2. 对两台机器生成密钥 在 (A机器)上执行命令: [root@iZ ...
- springboot学习过程笔记
1.spring-boot-devtools热部署在IDEA中配置后不起作用(Eclipse设置了自动编译,所以不用额外设置) 1).pom.xml添加spring-boot-devtools依赖后 ...