【要求】：如何用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. git的一个merge流程

    git merge testSupport 合并testSupport分支代码到当前分支. 若无冲突发生,git commit -m "RM ID:5094",在git push即 ...

  2. windows下捕获dump之守护进程

    一两个月前为产品写了一个独立的exe,由于产品使用的捕获dump是一个现成的进程外exe,如果以资源的方式集成它容易出现安全警告,由于时间关系没有寻求新的解决方法,还是遵循旧方案,不捕获dump. 最 ...

  3. linux在shell date获取时间的相关操作

    获得当天的日期 date +%Y-%m-%d 输出: 2011-07-28 将当前日期赋值给DATE变量DATE=$(date +%Y%m%d) 有时候我们需要使用今天之前或者往后的日期,这时可以使用 ...

  4. 为什么要使用 F#？

      对于小部分 .NET 程序员来说,学习一门 .NET Framework 函数化语言无疑将使自己在编写功能强大软件方面前进一大步.而对其他程序员来说,学习 F# 的理由就因人而异了.F# 能为开发 ...

  5. 嵌套 click 第二层 click会叠加 导致 触发 多次

    $("#appearHiddenDiv").click(function(){ $("#hiddenDiv").css({display:"block ...

  6. Oracle连接查询内容整理

    --内连接--select t.*,b.bumenmc from T_HQ_RYXX t,t_hq_bm b where t.bum = b.bumenbm--select * from t_hq_r ...

  7. treap 1286郁闷的出纳员.cpp

    #include<cstdio>#include<cstdlib>#include<ctime>struct shu{ int l,r,sum,zhi,dui;}a ...

  8. Convert.ToInt16 与 Convert.ToInt32 区别

    取值的范围不同: int16:-32768 到 32767 int32:-2,147,483,648 到 2,147,483,647

  9. jquery的监听事件和触发事件

    监听事件 $(selector).on('Event me',function(e){ //do something }) 触发事件 $(selector).trigger('Event name') ...

  10. 立体透视 perspective transform-style 倾斜旋转

    1.perspective 是设置镜头距离,距离越远视图越小,视图越近,视图越大.就像相机焦距一样.其只对子元素产生效果. 2.transform-style: preserve-3d 设置3d效果, ...