CSS文字超出div或者span时显示省略号
我们常常需要在文本过长时显示,将超出显示成省略号:
思想为:
首先设置宽度,然后让超出的部分隐藏
如果有超出则在最后显示省略号
让文本不换行
具体css代码为:
.title{
width:200px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
word-break:keep-all;
}
Html代码就不用写了,一个div 或者span class = "title"即可。
CSS文字超出div或者span时显示省略号的更多相关文章
- CSS实现超出DIV宽度文字自动隐藏并显示省略号
当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- Css文字在div中自动换行
Css文字在div中自动换行 word-break:break-all; 文字在div中字段换行
- css 控制文字超出时显示省略号
不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- 文字超出DIV后,隐藏文字并显示...
<html> <head> <style type="text/css"> #cs{width:100px;height:50px;line-h ...
- JQuery 简单的文字超出部分隐藏下拉显示
HTML代码: <body> <div class="txt_bos"><!--在每一个放置文字的class外面包一个div,以便设置动画样式用,同样 ...
- Div和Span标签显示与隐藏
本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...
- css 文字超出省略号
white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; 语法: text-ove ...
随机推荐
- Winpcap网络编程九之Winpcap实战,ARP协议获得MAC表及主机通信
大家好,本次我们须要完毕的任务是: 完毕两台主机之间的数据通信(数据链路层) 仿真ARP协议获得网段内主机的MAC表 使用帧完毕两台主机的通信(Hello! I'm -) 声明:本文章的目的是为大家的 ...
- 【C语言】输入一组整数,求出这组数字子序列和中最大值
//输入一组整数.求出这组数字子序列和中最大值 #include <stdio.h> int MAxSum(int arr[],int len) { int maxsum = 0; int ...
- [英国][记录][战争中的世界:二战全史(26集)][BD-MKV/58G][中英双字][经典收藏]
[英国][记录][战争中的世界:二战全史(26集)][BD-MKV/58G][中英双字][经典收藏] 原片名:The World at War 中文名:战争中的世界 导 演:Ted Childs, ...
- Web Service中的XFire 传输List 自定义对象.
我把这个创建的步骤和代码的贴出来,. 首先新建一个工程,取名就随便点啦..MyWebService,然后复制jar包到lib目录下, 创建包,建立接口..写一个javaBean的类, 以下是一个简单的 ...
- Collections你用对了吗?
.Net有两类基础的集合类型:List和Dictionary.List是基于Index的,Dictionary是基于key的.集合类型一般实现了IEnumberable,ICollection或者Il ...
- 被「李笑来老师」拉黑之「JavaScript微博自动转发的脚本」
故事的背景如下图,李笑来 老师于10月19日在 知乎Live 开设 一小时建立终生受用的阅读操作系统 的讲座,他老人家看到大家伙报名踊跃,便在微博上发起了一个 猜数量赢取iPhone7 的活动. 因为 ...
- HDU 5794 - A Simple Nim
题意: n堆石子,先拿光就赢,操作分为两种: 1.任意一堆中拿走任意颗石子 2.将任意一堆分成三小堆 ( 每堆至少一颗 ) 分析: 答案为每一堆的 ...
- Apache的httpd命令详解
Apache的httpd命令详解 来源:全栈开发者 发布时间:2012-01-03 阅读次数:10965 4 httpd.exe为Apache HTTP服务器程序.直接执行程序可启动服务器的服务. ...
- Android studio 配置JNI环境
Android studio配置jni开发环境,主要配置是两个build文件,以及新建一个jni文件,放c代码. 代码如下1: apply plugin: 'com.android.model.app ...
- css 兼容小三角
<!DOCTYPE><html ><head><meta http-equiv="Content-Type" content=" ...