css中的text-overflow

HTML中：

<body>
<div class="clip">此处中多余的文字直接被切掉，不显示</div>
<div class="ellipsis">此处中多余的文字将用省略号代替</div>
</body>

css中：

<style>
    .clip{
        width:100px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:clip;
    }
    .ellipsis{
        width:100px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
</style>

css中的text-overflow的更多相关文章

  1. css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

    pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

  2. CSS中position和header和overflow和background

    <!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...

  3. CSS中的overflow属性

    导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...

  4. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  5. CSS中overflow:hidden

    CSS中,overfllow:hidden的作用是隐藏溢出 比如:<div style="width:300px;overflow:hidden" id=1><d ...

  6. 转：css中overflow:hidden 不起作用了吗？

    css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...

  7. CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

    CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...

  8. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  9. 原来css中的border还可以这样玩

    原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...

  10. HTML和CSS设置动态导航以及CSS中伪元素的简单说明

    HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...

随机推荐

  1. Spring学习---JPA配置和使用

      理论的东西如果不实践,永远不会变成自己的东西.本文将介绍用maven管理,用Hibernate作为JPA供应商,使用MYSQL数据库,配置和使用JPA.   以下代码已经上传至GITHUB.   ...

  2. Post data using ajax in laravel 5

    转自:http://www.tuicool.com/articles/2u2mmmu Post data using ajax in laravel 5 to controller If you ar ...

  3. 概率dp初探

    论文链接:  http://wenku.baidu.com/link?url=vEcfxpqAvGRf6JL9IL2R6v8plBgPnaP3tKp5niOBmoajk0y4CcpwFzL4SkfGS ...

  4. webstrom 编码

    设置文件保存格式: webstrom的右下角选择你需要的编码

  5. object 类 toString（） 和 equals（） 的覆写

    基本作用: objiect类是所有类的父类. 任何一个类定义的时候如果没有明确定义了父类的话,默认父类是Object类. class A extends Object{} 在整个java里面,类的继承 ...

  6. [题解]bzoj 1861 Book 书架 - Splay

    1861: [Zjoi2006]Book 书架 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 1396  Solved: 803[Submit][Stat ...

  7. Web前端开发中的各种CSS规范

    Reference: http://yusi123.com/2866.html 一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和 ...

  8. 如何开发一个微信小程序

    一.概述     特点:对商家来说,小程序的开发成本低(有丰富的组件.api等).运营成本低(有数据日志等).稳定.互动流畅,便于分享.传播(基本微信平台的大量用户).对用户来说,扫码即可获取服务,随 ...

  9. Oracle用户权限分配

    一.权限分类 系统权限:系统规定用户使用数据库的权限.(系统权限是对用户而言). 实体权限:某种权限用户对其它用户的表或视图的存取权限.(是针对表或视图而言的). 二.系统权限管理 1.系统权限分类: ...

  10. c++ split()实现

    在c++中,没有java与python中定义的split()功能的函数,于是自己实现之. 情况1,适用范围,分隔符为字符.思路,记录分隔符的位置,判断需要截取的字符串的下标范围. vector< ...