【要求】：如何用css实现字符串截断，超出约定长度后用缩略符...代替？

  ♪ 答：

<html>

<head>

    <meta charset="UTF-8">

    <title>用 css 实现字符串截断</title>

    <style>

        div {

            width: 300px;

            overflow: hidden;   /*规定当内容溢出元素框时发生的事情*/

            white-space: nowrap;    /*设置如何处理元素内的空白。规定在文本中不进行换行*/

            text-overflow: ellipsis;    /*规定当文本溢出包含元素时发生的事情*/

        }

    </style>

</head>

<body>

    <div>轻轻松松制作div+css截取字符段在规定长度，超出部分用...代替！</div>

</body>

</html>

☸ 属性参考：white-space、text-overflow

用 CSS 实现字符串截断的更多相关文章

  1. js中文输入法字符串截断

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. C++常用的string字符串截断函数

    C++中经常会用到标准库函数库(STL)的string字符串类,跟其他语言的字符串类相比有所缺陷.这里就分享下我经常用到的两个字符串截断函数: #include <iostream> #i ...

  3. CSS和字符串实现三角形

    听说是百度校招的题目,就写了一下 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  4. 小tips：JS/CSS实现字符串单词首字母大写

    css实现: text-transform:capitalize; JS代码一: String.prototype.firstUpperCase = function(){ return this.r ...

  5. 【python】含中文字符串截断

    对于含多字节的字符串,进行截断的时候,要判断截断处是几字节字符,不能将多字节从中分割,避免截断后乱码 下面给出utf8和gb18030上的实现, 用任何一种都可以,可以先进行转码,用encode, d ...

  6. css颜色字符串转换, 字符串转化为驼峰形式

    * 将 rgb 颜色字符串转换为十六进制的形式,如 rgb(255, 255, 255) 转为 #ffffff1. rgb 中每个 , 后面的空格数量不固定2. 十六进制表达式使用六位小写字母3. 如 ...

  7. CSS截取字符串，额外的文本显示以省略号

    最近的诀窍css还有这么叼炸天的侧~~~ 善待似论坛页面,头像70px,但username不限啊,English中国能够.你说如果他采取"我的名字是这么长啊.你该怎么办呢".那老和 ...

  8. Css 截取字符串长度

    .shortNameShow{ overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowr ...

  9. Oracle字符串截断

    字段.SUBSTR(string,start_position,[length]) 求子字符串,返回字符串解释:string 元字符串, start_position 开始位置(从0开始), leng ...

随机推荐

  1. 通过class和id获取DOM元素的区别

    1.通过id获取DOM元素的方法:document.getElementById("id名") 2.通过class获取DOM元素的方法:document.getElementsBy ...

  2. JDE910笔记2--OMW项目建立及简单使用

    1.打开JDE的OBJECT MANAGEMENT WORKBENCH.在工作区中选择ADD,建立项目并选择OMW PROJECT,添加相关信息,如下图所示 其中,ProjectID可以对应不同的数据 ...

  3. NetworkComms框架介绍 完美支持TCP/UDP协议

    NetworkComms网络通信框架序言 英文文章地址 :http://www.networkcomms.net/tcp-udp-connections/ NetworkComs.Net无缝的支持TC ...

  4. 重点关注之OData with List

    OData是什么 官方解释:The Open Data Protocol (OData) is a data access protocol for the web. OData provides a ...

  5. Ubuntu用户相关基本命令

    Linux是一个用户权限管理得很严格的系统,Ubuntu作为最受欢迎的桌面发行版,提供了简单易用的图形界面工具来管理用户,但是命令行工具往往更强大,用得熟练的话效率会更高.用户管理命令常用的有如下几个 ...

  6. 从问题域出发认识Hadoop生态系统

    近些年来Hadoop生态系统发展迅猛,它本身包含的软件越来越多,同时带动了周边系统的繁荣发展.尤其是在分布式计算这一领域,系统繁多纷杂,时不时冒出一个系统,号称自己比MapReduce或者Hive高效 ...

  7. jquery之getJSON方法获取中文数据乱码解决方法

    最近公司做的东西要用到js,感觉js太繁琐,所以自己学起了jquery,发现jquery确实强大.在学到jquery ajax的时候(用的工具是eclipse),发现$.getJSON()方法请求服务 ...

  8. POJ 3648 2-sat

    题目大意: 有一对新人结婚,邀请n对夫妇去参加婚礼. 有一张很长的桌子,人只能坐在桌子的两边,还要满 足下面的要求:1.每对夫妇不能坐在同一侧 2.n对夫妇 之中可能有通奸关系(包括男男,男女,女女) ...

  9. MonoRail MVC应用(2)-构建多层结构的应用程序

    习惯了分层结构的.NET开发了,当然也是分层有优势,所以在使用MonoRail进行网站构建时,首先考虑到的问题就是MonoRail如何应对分层的结构.问题1:MonoRail在WEB层没有根目录,必须 ...

  10. CSU 1021 B(Contest #3)

    Description 从m个不同元素中取出n (n ≤ m)个元素的所有组合的个数,叫做从m个不同元素中取出n个元素的组合数.组合数的计算公式如下: C(m, n) = m!/((m - n)!n! ...