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. cordova开发跨平台应用问题随笔记

    iOS下频繁请求地理位置授权 做的某个cordova应用有用到geolocation插件,跑在iOS的时候发现app请求了一次授权,结果webkit还请求了一次授权,不但如此,webkit请求的格式还 ...

  2. 修改linux终端DIR显示颜色

    头疼死,linux终端下,目录颜色蓝色在黑色的背景下,睁大双眼都看不清楚. 找办法修改,找到默认的颜色设置目录: # vi /etc/DIR_COLORS 查看文件,并查找DIR: 可以看到默认设定“ ...

  3. PDF文件可以转换成txt文档吗

    PDF是一种便携式的文件格式,传送和阅读都非常方便,是Adobe公司开发的跨平台文件格式,它无论在哪种打印机上都可以保证精确的颜色和准确的打印效果.可是有点遗憾的是PDF格式一般不能在手机上打开,或者 ...

  4. mysql主从复制-方案1

    mysql主机master 1. 编辑mysql配置文件my.cnf server_id = 1                     #server_id服务器唯一标识 log_bin = mys ...

  5. mysql中查看数据库的版本，什么版本

    需求:查看当前使用的数据库是哪个版本的,什么版本 select version(); 查询结果: 备注:通过version()函数查询出来当前使用的数据库版本是5.5.57-log 文档创建时间:20 ...

  6. 【scala】 scala 映射和元组操作(四)

    1.映射  Map 定义 ,取值,遍历,排序 2. 元组 定义,取值,拉链操作 import scala.collection.mutable /** * 映射和元组 * * @author xwol ...

  7. Ognl_JSTL_学习笔记

    控制标签 使用Struts2标签必须先导入标签库,在页面使用如下代码导入Struts2标签:<%@taglib prefix="s" uri="/struts-ta ...

  8. my-small.ini、my-medium.ini、my-large.ini、my-huge.ini文件的作用

    安装完mysql之后或者是下载的免安装版解压之后,默认是没有my.ini文件的.但是,有几个类似的文件,如my-small.ini.my-medium.ini.my-large.ini.my-huge ...

  9. cocos2d-x 3.0 在C++中调用lua函数(2)

    个人觉得3.0里面, 在C++下面调用lua函数很不方便, 所以就扩展了一个类, 继承自LuaStack, 代码和使用方式如下: #ifndef __CC_LUA_STACKEX_H_ #define ...

  10. jquery easyui datagrid 无滚动条，datagrid 没垂直滚动条

    jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条 ============================== 蕃薯耀 2018年2月6日 http://www. ...