以前实现这种效果需要在程序里判断字符的长度,如果长度大于多少个字符,就截取字符,用省略号代替,而且是在服务器处理的,现在只需要用css的属性来操作,简单、实用、节省性能、不用做过多的程序判断、节约开发时间，可谓一举多得。在此分享一下，欢迎交流
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>text-overflow</title>

<style type="text/css">

.test_demo{

　　text-overflow:ellipsis;

　　overflow:hidden;

　　white-space:nowrap;

　　width:100px;

　　background:#0094ff;

　　color:#FFF;

　　padding:10px;

　　margin:10px;

　　border-radius:5px;

}

.test_demo:hover{

　　text-overflow:ellipsis;

　　overflow:hidden;

　　white-space:nowrap;

　　width:100px;

　　background:#337ab7;

　　color:#FFF;

　　padding:10px;

　　margin:10px;

　　border-radius:5px;

}

</style>

</head>

　　<body>

　　　　<div class="test_demo">超酷的IT技术学习平台（我是省略号）</div>

　　</body>

</html>

用css布局的方法实现如果字符超过一定长度就显示成省略号的更多相关文章

  1. DWZ 框架remote 验证字段唯一性方法提交后台，如果是中文会显示成乱码问题

    关于jquery  remote 验证字段唯一性方法提交后台,如果是中文会显示成乱码问题.可以直接修改tomcat 配置文件server.xml  设置 URIEncoding=utf-8属性,将ge ...

  2. CSS布局---居中方法

    在web页面布局中居中是我们常遇到的情况,而居中分为水平居中与垂直居中 文本的居中 CSS中对文本的居中做的非常友好,我们是需要text-align, line-height 两个属性就可以控制文本的 ...

  3. css012 css布局简介

    css012  css布局简介 一.    网页布局的类型 网页布局的类型 1.固定宽度 2.流式 3.相应式web设计 二.    如何进行css布局 1.强大的<div>标签 网页的h ...

  4. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  5. CSS常用布局实现方法

    CSS 布局对我来说,既熟悉又陌生.我既能实现它,又没有很好的了解它.所以想总结一下,梳理一下 CSS 中常用的一列,两列,三列布局等的实现方法.本文小白,仅供参考.但也要了解下浮动,定位等. 一.一 ...

  6. CSS实现横列布局的方法总结

    一.使用float实现横列布局的方法 如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 div1 div2 实现下面图片中布局的css样式如下: 分析: 1.第一行第一 ...

  7. 多种方法实现左右固定，中间自适应的CSS布局

    布局是面试中常问的问题,尤其是这类的题目,怎么答才好呢? 大多数人的第一个方法是浮动,没错,浮动.第二个方法呢?你回答定位,没错.第三个方法呢?.... 第四个方法呢?第五个方法呢?.... 其实能想 ...

  8. 一、CSS实现横列布局的方法总结

    一.使用float实现横列布局的方法 如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 div1 div2 实现下面图片中布局的css样式如下: 分析: 1.第一行第一 ...

  9. css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法

    方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...

随机推荐

  1. AngularJs $templateCache 和 $templateRequest 模板缓存

    $templateCache 第一次使用模板,它被加载到模板缓存中,以便快速检索.你可以直接将模板标签加载到缓存中,或者通过$templateCache服务. 通过script标签: <scri ...

  2. 【Alpha阶段】第七次Scrum例会

    会议信息 时间:2016.10.29 21:30 时长:60min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:2016.11.01 21:30 个人任务报告 姓名 今日已完成Is ...

  3. java编程思想-java注解

    注解(也被称为元数据)为我们在代码中添加信息提供了一种形式化的方法,使我们可以在稍后某个时刻非常方便的使用这些数据. 一.定义注解 注解的定义看起来很像接口的定义.事实上,与其他任何Java接口一样, ...

  4. 最小路径(prim)算法

    #include <stdio.h>#include <stdlib.h>/* 最小路径算法 -->prim算法 */#define VNUM 9#define MV 6 ...

  5. js008-BOM

    js008-BOM 本章内容: 1.理解window对象-BOM的核心 2.控制窗口.框架和弹出窗口 3.利用location对象中的页面信息 4.使用navigation对象了解浏览器 ECMASc ...

  6. sql 查询每月的销售金额

    sql 数据分月统计,表中只有每天的数据,现在要求求一年中每个月的统计数据(一条sql) SELECT   MONTH (  那个日期的字段  ),   SUM(  需要统计的字段, 比如销售额什么的 ...

  7. c++编译错误提示及解决

    IntelliSense: #error 指令: Please use the /MD switch for _AFXDLL builds 修改设置:工程(Project)-> 属性(Prope ...

  8. Linux下小工具使用总结

    0. 前言 这篇博客仅用于记录个人在工作中用到的一个小工具,后续用到别的会再补充. 1. Tmux 终端分用器(multiplexer),可以在一个屏幕上创建多个终端,这个工具也可以用于结对编程. 个 ...

  9. live555库中的testRTSPClient实例

    1.testRTSPClient简介 testRTSPClient是个简单的客户端实例,这个实例对rtsp数据交互作了详细的描述,其中涉及到rtsp会话的两个概念Source和Sink. Source ...

  10. Django笔记-helloworld

    网上的Django资料太乱了,我想写一下自己的学习过程(只记大体过程,有时间就完善).(用eclipse+PyDev工具开发的) 1.项目结构 2.关键代码:(注意缩进,可能贴上来缩进格式等有变化,我 ...