<div class="title">当对象内文本溢出时显示省略标记</div>

这是一个例子,其实我们只需要显示如下长度:

css实现网页中文字过长截取...

title class应该这样写:

.title{ width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

说明:

1、宽度一定要设置,可以根据实际需求调整。

2、white-space:nowrap是禁止文字折行。

3、text-overflow表示当文本溢出时是否显示省略标记,有两个值:

clip:不显示省略标记(...),而是简单的裁切。
ellipsis:当对象内文本溢出时显示省略标记(...)

4、overflow:hidden表示溢出内容为隐藏。

css实现文字过长显示省略号的方法的更多相关文章

  1. CSS样式 解决文字过长显示省略号问题

    一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...

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

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

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

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

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

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

  5. css 实现文字过长变成省略号(包含单行的and多行的)

    单行的比较简单  但是必须条件同时满足 <DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: ...

  6. css设置文字多余部分显示省略号

    如果只显示一行,则可以使用以下方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 如果需要显示多行,在需要设置的元素s ...

  7. css实现文字内容超出显示省略号

    white-space: nowrap; /* 内容超出容器宽度时强制不换行 */ overflow: hidden; /* 内容超出容器时隐藏超出部分 */ text-overflow: ellip ...

  8. css对于文字过长加省略号

    overflow: hiddentext-overflow: ellipsiswhite-space: nowrap

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

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

随机推荐

  1. Android布局属性与常用控件

    一.Android常用布局属性 1. LinearLayout的特有属性 android:orientation:设置布局排列方式   android:layout_weight:设置所占布局的权重  ...

  2. minikube 设置CPU和内存

    安装minikube之后,第一次sudo minikube start 时,设置参数--cpus int  --memory int . 如果需要更改设置,需要将缓存文件$HOME/.minikube ...

  3. Flash 上下文管理

    1.Local() 作用:为每个协程或线程创建一个独立的内存空间 储存格式: { 唯一标识: {'stack': []} } 代码 try: from greenlet import getcurre ...

  4. Ogre源码学习-Image和Texture

    以下文字来自源码注释: Image类:保存未压缩的图片数据,是唯一一个可以加载纹理的类.Image对象调用Codec对象来为图片数据解码. 通常,当在图片被加载前需要对它进行额外的处理,或者你想把它复 ...

  5. Java8 Stream用法详解

    1.概述 Stream 的原理:将要处理的元素看做一种流,流在管道中传输,并且可以在管道的节点上处理,包括过滤筛选.去重.排序.聚合等.元素流在管道中经过中间操作的处理,最后由最终操作得到前面处理的结 ...

  6. itext5和itext7操作pdf平铺和图层叠加(tiling, and N-upping)

    区别 itext5 生成pdf版本:1.4(Acrobat5.x) itext7 生成pdf版本:1.7(Acrobat8.x) iText7生成的pdf文件大, itext7 Java库更加系统和完 ...

  7. python3操作MySQL的模块pymysql

    本文介绍Python3连接MySQL的第三方库--PyMySQL的基本使用. PyMySQL介绍 PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一个库,Python2中 ...

  8. Mondriaan's Dream 轮廓线DP 状压

    Mondriaan's Dream 题目链接 Problem Description Squares and rectangles fascinated the famous Dutch painte ...

  9. c语言秋季作业3

    本周作业头 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 作业链接 我在这个课程的目标是 运用C语言编程解决一些简单的数学问题 这个作业在那个具体方面帮助我实现目标 学习if else ...

  10. Linux 常用工具sysstat之iostat

    命令解释 用于输出CPU和磁盘I/O相关的统计信息:iostat依赖于sysstat软件包 命令格式 iostat [ 选项 ] [<时间间隔> [<次数>]] 常用选项 -c ...