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 ...
随机推荐
- iOS开发系列--打造自己的“美图秀秀”
概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz 2D绘制2D图形和Co ...
- Hacker(四)----查看计算机的IP地址
计算机接入Internet后,Internet就会给该计算机分配一个IP地址,若要查看该IP地址,可以借助度娘(百度,google)来实现.输入"IP地址查询"关键字,即可查看当前 ...
- web.xml中的主要元素说明(listener, filter, servlet)
web.xml中加载的顺序为:context-param ---> listener ---> filter ---> servlet. listener:主要针对的是对象的操作,如 ...
- <转>java中静态方法和非静态方法的存储
Java中非静态方法是否共用同一块内存? 将某 class 产生出一个 instance 之后,此 class 所有的 instance field 都会新增一份,那么所有的 instance met ...
- CSS 四个样式表格
1. 单像素边框CSS表格 这是一个很常用的表格样式. 源代码: <!-- CSS goes in the document HEAD or added to your external sty ...
- windows8开发学习笔记
XAML行列定义 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> &l ...
- html 调用 activeX(c++)
1.新建MFC ActiveX 2.添加方法 3.找到add函数编写代码 4.在test.idl中找到最后一个uuid 5.编译工程,会自动注册控件 6.html中的代码 <html> & ...
- 表单验证的validate.js插件---jQuery Validation Plugin
早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面, ...
- php 格式
$abc = ($_POST[' : strtotime($_POST['start_time']); 解析:判断接收的数据是否为0,如果等于0赋值0,若不等于,则赋值获取的数值. strtotime ...
- shell编程笔记(基本部分)
1.变量 a.需要给变量赋值时,可以这么写: b.要取用一个变量的值,只需在变量名前面加一个$ ( 注意: 给变量赋值的时候,不能在"="两边留空格 ) c.然后执行 chmod ...