现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width。

如果是行内元素则需要使用display设置为inline-block;

下面是对a,span等行内元素的使用CSS换行文本溢出显示省略号的比较准确的用法:

a,span
{
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
width:100px;
max-width:120px; }

CSS换行文本溢出显示省略号的更多相关文章

  1. CSS换行文本溢出显示省略号,多行

    首先,div部分 <body> <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-c ...

  2. CSS单行文本溢出显示省略号

    此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...

  3. css实现文本溢出显示省略号

    看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...

  4. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

  5. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  6. CSS3文本溢出显示省略号

    CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...

  7. 文本溢出显示省略号,CSS未加载时a标签仍可用处理方法

    一.文本溢出打点 (1)单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; (2)多行文本 overflow : h ...

  8. 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)

    如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...

  9. ZH奶酪:HTML元素文本溢出显示省略号(...)

    一 单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow 属性规定当内容溢出元素框时发生的事情. ...

随机推荐

  1. Motor XT615 开机无限卡屏重启的取证与分析

    hello,大家好! 今天我给大家你们带来摩托罗拉 XT615 开机无限卡屏重启的取证与分析, 手机开机后卡屏,一直停留下面这画面,无限重启! 接下来,经过我们工程师的分析,图上报错必定由于机身程序太 ...

  2. kthread_run【转】

    转自:http://blog.csdn.net/zhangxuechao_/article/details/50876397 头文件 include/linux/kthread.h 创建并启动 /** ...

  3. Linux定时任务Crontab学习笔记

    crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程,crond ...

  4. NOI 动态规划题集

    noi 1996 登山 noi 8780 拦截导弹 noi 4977 怪盗基德的滑翔翼 noi 6045 开餐馆 noi 2718 移动路线 noi 2728 摘花生 noi 2985 数字组合 no ...

  5. QT连接MySQL

    Qt 连接MySQL 是件很简单的事,但也有可能很不简单. QT给我们的提示只有 QMYSQL driver not loaded,让我们毫无头绪.访问其他数据库也可以用同样的方法解决. Qt 访问 ...

  6. [iOS][issis] requestLocationWithReGeocode AMapLocationErrorDomain Code=5 "取消"

    Tip: IOS 使用高德地图一次定位  (在该博客找到了解决答案) 在定位时如果出现下面这个Error,说明你的locationManager没有设置成全局变量,导致locationManager提 ...

  7. 微信小程序-基础内容组件

    icon 图标 示例: <view class="group"> <block wx:for="{{iconSize}}"> <i ...

  8. dpkg: 处理归档 /var/cache/apt/archives/软件名 (--unpack)时出错:由于已经达到 MaxReports 限制,没有写入 apport 报告。

    一.环境介绍: OS:ubuntu16.04 64bit 二.错误如下: 正准备解包 .../libqt4-script_4%3a4.8.7+dfsg-5ubuntu2_i386.deb  ...正在 ...

  9. linux 内核升级

    LINUX 内核升级 linux 内核官网 https://www.kernel.org/ POST BIOS(boot sequence) 所选择的启动设备次序的MBR中是否有引导程序, ----& ...

  10. 转行做开发的Wiki:找好方向

    案 我是一个从建筑行业转行过来的后端工程师,转行来写代码了.最近发现经常有同学和网上的朋友问我一些转行的问题,零零散散地回答莫不如写一篇文章,以后回答此类问题就方便多了. 我的专业是给排水,属于非常传 ...