【要求】：如何用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. lucene底层数据结构——底层filter bitset原理，时间序列数据压缩将同一时间数据压缩为一行

    如何联合索引查询? 所以给定查询过滤条件 age=18 的过程就是先从term index找到18在term dictionary的大概位置,然后再从term dictionary里精确地找到18这个 ...

  2. discuz 同步登录问题

    最近一直在搞discuz论坛的二次开发,发现在论坛登录或退出的时候应用却没有同步登录或同步退出,这下子麻烦了,后来查看,原来没有产生js的同步代码,查找原因,发现$_G['setting']['all ...

  3. Shell脚本：使用rsync备份文件/目录

    本文我们介绍一个shell脚本,用来使用rsync命令将你本地Linux机器上的文件/目录备份到远程Linux服务器上.使用该脚本会以交互的方式实施备份,你需要提供远程备份服务器的主机名/ip地址和文 ...

  4. 转: HTTP协议的头信息详解

    通常HTTP消息包括客户机向服务器的请求消息和服务器向客户机的响应消息.这两种类型的消息由一个起始行,一个或者多个头域,一个只是头域结束的空行和可 选的消息体组成.HTTP的头域包括通用头,请求头,响 ...

  5. Android 插入图片到媒体库

    今天介绍一下在Android中怎么插入图片到媒体库,下面看代码: final String titleName = Function.md5(imageUri.toLowerCase()) + &qu ...

  6. elementoryOS / ubuntu U盘启动问题的解决

    具体现象: 进入U盘启动后,停顿在"start booting from usb device..."不动. 解决方法:  将syslinux文件夹下的syslinux.cfg中的 ...

  7. matlab 2012 vs2010混合编程

    电脑配置: 操作系统:window 8.1 Matlab 2012a安装路径:D:\Program Files\MATLAB\R2012a VS2010 : OpenCV 2.4.3:D:\Progr ...

  8. 《Java中方法的参数传递方式只有一种：值传递》

    //方法的参数传递机制(1):基本类型做形参的传递. class PrimitiveTransferTest { public static void swap(int a,int b) { //下面 ...

  9. jsunit测试

    var script = document.createElement('script'); script.src = 'http://static.pay.baidu.com/resource/ba ...

  10. (转)Sqlite中INTEGER PRIMARY KEY AUTOINCREMENT和rowid的使用

    原文:http://www.cnblogs.com/peida/archive/2008/11/29/1343832.html Sqlite中INTEGER PRIMARY KEY AUTOINCRE ...