<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看</div>

语法:

text-overflow : clip | ellipsis

参数:

clip :  不显示省略标记(...),而是简单的裁切

(clip这个参数是不常用的!)

ellipsis :  当对象内文本溢出时显示省略标记(...)

说明:

设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。

请您注意,text-overflow:ellipsis属性在FF中是没有效果的。

示例:

div { text-overflow : clip; }

text-overflow是一个比较特殊的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50 个汉字,而我们的列表可能只有300px的宽度。如果用标题截取函数,则标题不是完整的,如果我们用CSS样式text- overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。

text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省 略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样 才能实现溢出文本显示省略号的效果。

有的时候的某段文本太长了,会影响整个的布局,很多人用动态语言来解决这个问题,但必须区分中文和英文,因为中文相当于两个英文字符长度,这样不仅繁琐,而且加重了服务器的负担。其实,我们完全可以使用CSS完美解决这个问题,

white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  <!-- 就这三句,,,嘿嘿....->

本文转载自:http://yangpanwww.iteye.com/blog/1107583

(转)如何实现CSS限制字数,超出部份显示点点点...的更多相关文章

  1. 怎么实现CSS限制字数,超出部份显示点点点.

    如何实现CSS限制字数,超出部份显示点点点... <div style="width:200px; white-space:nowrap;overflow:hidden;text-ov ...

  2. CSS限制字数,超出部份显示点点点...

    最近项目中需要用CSS实现限制字数,超出部份显示点点点...,只需要一下代码即可: width:400px;/*要显示文字的宽度*/ text-overflow :ellipsis; /*让截断的文字 ...

  3. 如何实现CSS限制字数,超出部份显示点点点...

    <div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1 ...

  4. 如何实现CSS限制字数,超出部份显示省略号

    <div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1 ...

  5. css设置内容超出后显示省略号

    1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...

  6. css 控制文字超出部分显示省略号

    该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...

  7. css 控制文字超出时显示省略号

    不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  8. css设置文字超出部分显示省略号。。。

    兼容IE/Firefox/Chrome display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

  9. CSS控制 文字超出部分显示省略号

    实现单行文本的溢出显示省略号, (需要加宽度width属来兼容部分浏览) <p style="width: 100px;overflow: hidden;white-space: no ...

随机推荐

  1. 如何利用Xshell在windows与linux之间互传文件

    如何利用Xshell在windows与linux之间互传文件 第一步: 安装Xshell. 第二步: 打开Xshell,若出现默认的对话框,则选择关闭,因为下面将演示如何将本地文件传输至远程linux ...

  2. POJ 2185 Milking Grid(KMP最小循环节)

    http://poj.org/problem?id=2185 题意: 给出一个r行c列的字符矩阵,求最小的覆盖矩阵可以将原矩阵覆盖,覆盖矩阵不必全用完. 思路: 我对于字符串的最小循环节是这么理解的: ...

  3. 一起动手打造个人娱乐级linux

    我们使用电脑,一直以来用的都是windows,但是对于像我这种爱折腾的人来说,尝试使用linux系统应该是一种不错的体验.说到linux,许多人可能都没听过,或者知道的人对它印象是这样的: 然而,li ...

  4. TimerPickerDialog 中 onTimeSet 执行两次的问题

    开发android小闹钟的程序时,在添加闹钟时闹钟列表中总是出现两个相同的闹钟. btnAddAlarm.setOnClickListener(new View.OnClickListener() { ...

  5. Codeforces Round #307 (Div. 2) D. GukiZ and Binary Operations 矩阵快速幂优化dp

    D. GukiZ and Binary Operations time limit per test 1 second memory limit per test 256 megabytes inpu ...

  6. Java开源-astar:A 星算法

    astar A星算法Java实现 一.适用场景 在一张地图中,绘制从起点移动到终点的最优路径,地图中会有障碍物,必须绕开障碍物. 二.算法思路 1. 回溯法得到路径 (如果有路径)采用“结点与结点的父 ...

  7. bzoj 1318 [SPOJ744] Longest Permutation (排列)

    大意: 给定序列, 求选出一个长度为k的区间, 使得区间内的数为[1,k]的排列, 且要求k最大 这题好神啊. 每个排列有且仅有一个1, 我们按1将序列分成若干子问题来处理, 而每个位置最多属于两个子 ...

  8. iOS UI-自动布局(AutoLayout)

    // // ViewController.m // IOS_0115_AutoLayout // // Created by ma c on 16/1/15. // Copyright (c) 201 ...

  9. 051——VUE中自定义指令:directive

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

  10. MongoDB学习(五)使用Java驱动程序3.3操作MongoDB快速入门

    [引言] 毕竟现在MongoDB还是出于成长阶段,所以现在网上相关的资料很少,而且大部分还都是针对于MongoDB的老版本的.再加上MongoDB的频繁升级.重大更新等等,导致菜鸟学习的难度增大. 好 ...