html使用css让文字超出部分用省略号三个点显示的方法案例
html使用css让文字超出部分用省略号三个点显示的方法:
我正确使用的就是下面的代码,li里面是a标记。在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测
li{
display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis;
}
直接拿这个css样式去用吧,编程嘛,解决就好,不用看下面的了。
语法:
text-overflow : clip | ellipsis
参数:
clip : 不显示省略标记(...),而是简单的裁切
(clip这个参数是不常用的!)
ellipsis : 当对象内文本溢出时显示省略标记(...)
说明:
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
请您注意,text-overflow:ellipsis属性在FF中是没有效果的。
示例:
div { text-overflow : clip; }
text-overflow是一个比较特殊的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50 个汉字,而我们的列表可能只有300px的宽度。如果用标题截取函数,则标题不是完整的,如果我们用CSS样式text- overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省 略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样 才能实现溢出文本显示省略号的效果。
示例:
修改前效果:
修改以后效果:
html使用css让文字超出部分用省略号三个点显示的方法案例的更多相关文章
- html使用css让文字多行超出部分用省略号三个点显示的方法案例
text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-w ...
- 常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)
文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...
- css 控制文字超出部分显示省略号
该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...
- Css解决表格超出部分用省略号显示
小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...
- css 实现文字过长变成省略号(包含单行的and多行的)
单行的比较简单 但是必须条件同时满足 <DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: ...
- css中文字超出文本框,溢出部分用点点点表示
text-overflow 属性规定当文本溢出包含元素时发生的事情.我们可以使用它来对文本超出的部分进行样式的处理. text-overflow: clip|ellipsis|string;包 ...
- CSS解决文字超出显示省略号问题
超出一行 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 超出多行 overflow: hidden; text-ove ...
- css 控制文字超出时显示省略号
不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- CSS样式-文字超出宽部分用省略号代替
.name {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;display:block;width:120px; }
随机推荐
- [Python3网络爬虫开发实战] 1.6.1-Flask的安装
Flask是一个轻量级的Web服务程序,它简单.易用.灵活,这里主要用来做一些API服务. 1. 相关链接 GitHub:https://github.com/pallets/flask 官方文档:h ...
- Python之文件处理-批量修改md文档内容
目录 Python之文件处理-批量修改md文档内容 Python之文件处理-批量修改md文档内容 #!/usr/bin/env python # -*- coding:utf-8 -*- import ...
- 89-Relative Vigor Index 相对活力指数指标.(2015.7.4)
Relative Vigor Index 相对活力指数指标 ~计算: RVI = (CLOSE-OPEN)/(HIGH-LOW) RVIsig=SMA(RVI,N) ~思想: 牛市中,收盘>开盘 ...
- vscode 解决符号无法识别的问题
一开始浏览代码出现了下面这个问题, __attribute__ 标记为红色,符号无法识别,下面还出现了很多提示需要加 ), } 等符号,虽然编译没问题,但是看着红色标记和一堆提示真是要逼死强迫症. 既 ...
- python pip 安装一些包找不到的问题 Could not find a version that satisfies....
有时我们使用下载python 自带的pip 安装一些工具包时,会报如下错误 找不到满意的版本,这时就是我们的pip可能需要升级了,所以使用 python -m pip install --upgrad ...
- 看板娘 & 二次元 & live2d
live2d https://l2dwidget.js.org/dev.html https://github.com/xiazeyu/live2d-widget.js 看板娘 要切换看板娘吗? ht ...
- noip模拟赛 分组
分析:暴力分挺多,也挺好想的,个人感觉两个特殊性质没什么卵用. 对于K=1,n ≤ 1024的情况,从后往前贪心地分,如果能和上一组分在一起就分在一起,否则就再开一组,这样可以保证字典序最小.ai ≤ ...
- MTK TP手势添加
old: #include "tpd.h" #include "tpd_custom_gt9xx.h" #ifndef TPD_NO_GPIO #include ...
- Spring Data JPA 之 一对一,一对多,多对多 关系映射
一.@OneToOne关系映射 JPA使用@OneToOne来标注一对一的关系. 实体 People :用户. 实体 Address:家庭住址. People 和 Address 是一对一的关系. 这 ...
- 【CodeChef】KNGHTMOV(方案数DP)
题意: 考虑一张无限大的方格棋盘.我们有一个“骑士”,它必须从(0,0)格开始,按照如下规则,移动至(X,Y)格:每一步,它只能从(u,v)格移动至(u+Ax,v+Ay)或者(u+Bx,v+By).注 ...