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零零散散的笔记的更多相关文章

  1. CSS揭秘读书笔记 (一)

    CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background: ...

  2. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  3. 《CSS揭秘》笔记(一)

    前言 我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...

  4. CSS 3 学习笔记

    css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal:    控制连续文本换行.break-word:    内容将在边界内换行.如果需要,词 ...

  5. css随堂笔记(三)

    Css随堂笔记(三) 1 关于背景图片   A 设置背景图片:background-image:url(“图片的路径”):   B 背景图片位置: background-position:1 方位名词 ...

  6. (2)《Head First HTML与CSS》学习笔记---img与基于标准的HTML5

    1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...

  7. 《CSS世界》笔记二:盒模型四大家族

    上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...

  8. css 权威指南笔记(一)

    零零散散接触css将近5年,俨然已经成为一个熟练工.如果不是换份工作,我不知道自己差的那么远:在qunar的转正review中我这种“知其然而不知其所以然” 的状况被标明,我才意识到我已停步不前近两年 ...

  9. HTML&CSS基础学习笔记1.32-选择器是什么

    选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...

随机推荐

  1. linux中chown命令

    chown将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID:组可以是组名或者组ID:文件是以空格分开的要改变权限的文件列表,支持通配符.系统管理员经常使用chown命令,在将文件拷贝 ...

  2. Windows7双系统卸载Ubuntu

    正确的删除ubuntu方法如下: 第1步,修复MBR 1.进入win7,下载个软件MbrFix.exe,放在C:\windows\system32文件夹中 2.点击开始>所有程序>附件&g ...

  3. 单用户模式&救援模式&克隆虚拟机&Linux机器相互登录

    1.13 单用户模式 1.14 救援模式 1.15 克隆虚拟机 1.16 Linux机器相互登录 1.单用户模式 关机:init 0 .poweroff 重启:init 6 .reboot 关机:in ...

  4. recovery中英对照表 recovery大全图解

    一:Recovery主界面 ---reboot system now                         重启手机(刷机完毕选择此项就能重新启动系统) ---apply SDcard:up ...

  5. 微信小程序使用阿里图标

    微信小程序不支持外联阿里图标,必须下载放入小程序的本地文件中. 步骤一:下载项目图标 步骤二:转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参 ...

  6. EJB的魅惑来源

      有人发帖子问学习EJB有个屁用啊?看完下面一个简单的介绍,也许你对EJB很感兴趣,它的优点极具魅惑力. 一.EJB是基于组件的开发. 利用Enterprise JavaBean,你就能像搭积木一样 ...

  7. GCT之数学公式(三角函数)

  8. pytest集成Allure Report

    https://blog.csdn.net/liuchunming033/article/details/79624474#commentBox https://blog.csdn.net/lihua ...

  9. vue二级联动select

    <div> <span>所在区域</span> <select name="" v-model="country"&g ...

  10. 【乐呵一下】WINDOWS有个非常低级的错误!

    该错误来自微软windows附带的计算器(开始附件计算器). 1. 当你尝试用9216除以96并按下=按钮时,计算器竟然没有反应!!! 而9216除以97,98却正常. 2. 还有一个错误,当你尝试用 ...