css 实现省略号. text-overflow: ellipsis; 同时设置四个属性才可以.
这个同时需要. text-overflow ; overflow ; white-space ; width ; 四个属性才可以.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css实现省略号</title>
<style type="text/css"> /***超出长度显示省略号. 还需要设置width**/ .ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} ul > li {
border: 1px solid red;
width: 200px;
} </style>
</head>
<body> <ul>
<li class="ellipsis" >测试一,测试一,测试一,测试一</li>
<li class="ellipsis" >测试二</li>
<li class="ellipsis" >测试三,测试三,测试三,测试三</li>
</ul> </body>
</html>
效果:
参考链接:
CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
css 实现省略号. text-overflow: ellipsis; 同时设置四个属性才可以.的更多相关文章
- css 文本省略号设置
本文推荐2种方法. 1. css tip:只兼容chrome内核的浏览器.ff不支持. .box { overflow: hidden; /* 溢出时不显示溢出的内容 */ text-overflow ...
- CSS深入理解之overflow
CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...
- css文本省略号
这里记录下如何用CSS实现单行.多行文本溢出容器的时候用省略号代替溢出部分. 单行文本溢出容器时显示省略号的CSS实现方法 /* 规定当内容溢出元素框(容器)时隐藏 */ overflow: hidd ...
- 纯css实现省略号，兼容火狐，IE9，chrome
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡
pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...
- css 浮动问题 display显示 和 光标设置cursor
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>浮 ...
- CSS Animation triggers text rendering change in Safari
薄荷新首页上周五内测,花哥反馈在 MacBook Safari 浏览器下 鼠标移动到第一个商品的时候后面几个商品的文字会加粗.这是什么鬼??? 待我回到家打开笔记本,鼠标蹭蹭蹭的发现问题远不止如此: ...
- radio，checkbox，select，input text获取值，设置哪个默认选中
11 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title& ...
- css文本样式text、字体样式font
文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用 默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...
随机推荐
- dsu on tree练习
dsu on tree主要是处理一些有根树子树询问的操作, 作用与点分治和线段树合并类似. 一般无根树询问所有树链信息的直接就点分了, 有根树的话一般用线段树合并或dsu on tree, 线段树合并 ...
- 关于*[pylint]E1101:Module 'xxx' has no 'xxx' member* 简单而有效的解决办法
关于 pylint 的 *E1101* 错误: 概念: %s %r has no %r member Function %r has no %r member Variable %r has no % ...
- 『cs231n』卷积神经网络工程实践技巧_下
概述 计算加速 方法一: 由于计算机计算矩阵乘法速度非常快,所以这是一个虽然提高内存消耗但是计算速度显著上升的方法,把feature map中的感受野(包含重叠的部分,所以会加大内存消耗)和卷积核全部 ...
- 【PowerDesigner】【9】禁止Name与Code同步
问题:修改了某个字段的name,其code也跟着修改 步骤:Tools→General Options..→Dialog→取消勾选“Name to Code mirroring”复选框 参考博客: 1 ...
- strom：实时的WordCount
集采单词 package wordcount; import java.io.File; import java.io.IOException; import java.util.Collection ...
- sqlserver用timestamp帮助解决数据并发冲突 转【转】
http://blog.csdn.net/u011014032/article/details/42936783 关于并发请求,网上很多朋友都说的很详细了,我就不在这里献丑了.这里只记录下刚刚完工的那 ...
- iphone手机在网页返回上一页时，部分字体变大问题
最近做一个项目是,发现了一个iphone的兼容性问题,在返回上一页后,部分字体会变大,刷新就会正常. 经过总结,发现都是span标签里面的字体变大.经过查询发现,需要给span添加一个属性:displ ...
- Rail_UVa514_栈
/* https://vjudge.net/problem/UVA-514 */ #include "pch.h" #include<iostream> #includ ...
- android apk瘦身
1.在gradle使用minifyEnabled进行Proguard混淆的配置,可大大减小APP大小 通过Build.gradle进行配置 2.删除无用的Resource文件. 这个和上面的肯定不一样 ...
- jquery ready&&load用法
ready和load那一个先执行 DOM文档加载的步骤 (1) 解析HTML结构 (2) 加载外部脚本和样式表文件 (3) 解析并执行脚本代码 (4) 构造HTML DOM模型 //ready (5) ...