css实现文字过长显示省略号的方法
<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实现文字过长显示省略号的方法的更多相关文章
- CSS样式 解决文字过长显示省略号问题
一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...
- css 控制文字超出部分显示省略号
该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...
- css 控制文字超出时显示省略号
不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- CSS控制 文字超出部分显示省略号
实现单行文本的溢出显示省略号, (需要加宽度width属来兼容部分浏览) <p style="width: 100px;overflow: hidden;white-space: no ...
- css 实现文字过长变成省略号(包含单行的and多行的)
单行的比较简单 但是必须条件同时满足 <DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: ...
- css设置文字多余部分显示省略号
如果只显示一行,则可以使用以下方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 如果需要显示多行,在需要设置的元素s ...
- css实现文字内容超出显示省略号
white-space: nowrap; /* 内容超出容器宽度时强制不换行 */ overflow: hidden; /* 内容超出容器时隐藏超出部分 */ text-overflow: ellip ...
- css对于文字过长加省略号
overflow: hiddentext-overflow: ellipsiswhite-space: nowrap
- css设置文字超出部分显示省略号。。。
兼容IE/Firefox/Chrome display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
随机推荐
- python爬虫——scrapy的使用
本文中的知识点: 安装scrapy scrapy的基础教程 scrapy使用代理 安装scrapy 由于小哥的系统是win7,所以以下的演示是基于windows系统.linux系统的话,其实命令都一样 ...
- Qt Installer Framework翻译(3-0)
终端用户使用流程 离线安装和在线安装对终端用户来说是相似的.安装程序将你的应用程序和维护工具一起打包,该工具由包管理器,更新程序和卸载程序组成.用户可以使用维护工具来添加,更新和删除组件.维护工具连接 ...
- 异常java.lang.NoSuchMethodError: org.springframework.core.GenericTypeResolver.resolveTypeArguments(Ljava/lang/Class;Ljava/lang/Class;)[Ljava/lang/Class;
java.lang.NoSuchMethodError: org.springframework.core.GenericTypeResolver.resolveTypeArguments(Ljava ...
- .net core webapi搭建(2)跨域
Core WebAPI中的跨域处理 在使用WebAPI项目的时候基本上都会用到跨域处理 Core WebAPI的项目中自带了跨域Cors的处理,不需要单独添加程序包 如图所示 修改 Configure ...
- 「 神器 」在线PDF文件管理工具和图片编辑神器
每天进步一丢丢,连接梦与想 在线PDF文件管理工具 完全免费的PDF文件在线管理工具,其功能包括:合并PDF文件.拆分PDF文件.压缩PDF文件.Office文件转换为PDF文件.PDF文件转换为JP ...
- 说实话 NuGet Package Manager 网速不是一般的慢
- Unity SurfaceShader详解
声明:文章主要是总结手游开发的经验,只涉及到了前向渲染.未涉及延迟渲染. Unity的Surface Shader本质上就是VS/PS.只不过Unity经过精心设计,将shader划分为了几个关键部分 ...
- Spring注解开发系列Ⅱ --- 组件注册(下)
1.@Import注册组件 @Import主要功能是通过导入的方式实现把实例加入springIOC容器中, /** * 给容器注册组件 * 1.包扫描+组件标注注解(@Controller,@Serv ...
- 7.场景5:使用Linux桥的VRRP(L3HA)的高可用性
此场景描述了使用ML2插件和Linux网桥的OpenStack网络服务的高可用性实现. 他的高可用性实施例增强了这样的场景:具有Linux网桥架构的传统使用了keepalived的虚拟路由器冗余协议( ...
- 消息中间件面试题31道RabbitMQ+ActiveMQ+Kafka
消息中间件面试题31道RabbitMQ+ActiveMQ+Kafka 前言 文章开始前,我们先了解一下什么是消息中间件? 什么是中间件? 非底层操作系统软件,非业务应用软件,不是直接给最终用户使用的, ...