HTML不换行，多余用省略号代替
最主要的css样式：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.page_right_bot{
width:165px;
height:128px;
border: 1px solid red;
overflow:hidden;
}
.page_right_bot ul li{
height:25px;
line-height:25px;
cursor: pointer;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
</style>
</head>
<body>
<div class="page_right_bot">
<ul>
<li>威洁士汽车美容加盟 业内的佼佼者</li>
<li>一点点奶茶加盟店 打造茶饮极致诱惑</li>
<li>威洁士汽车美容加盟 业内的佼佼者</li>
<li>一点点奶茶加盟店 打造茶饮极致诱惑</li>
<li>车奇士汽车快修加盟 80后创业轻松</li>
<li>雅芳护肤品加盟 非常有发展前</li>
<li>顺畅衣柜加盟选择欧蒂尼，创富新项目</li>
<li>景克丽缇娜美容院加盟 书写财富新篇章</li>
<li>威洁士汽车美容加盟 业内的佼佼者</li>
<li>加盟驰易佳换油中心 让你轻松当老板</li>
</ul>
</div>
</body>
</html>
效果图：
HTML不换行，多余用省略号代替的更多相关文章
- CSS多余文本省略号显示
CSS多余文本省略号显示 本次案例代码是在 elementui 当中的 table 组件中实际需求 当然使用的是纯 CSS3 代码,所以原生支持度高,兼容性高,所以可多场景应用 对于过长文本进行单行省 ...
- 转css中文英文换行、禁止换行、显示省略号
css中文英文换行.禁止换行.显示省略号 原创 2016年08月09日 14:20:01 word-break:break-all;只对英文起作用,以字母作为换行依据 word-wrap:brea ...
- GridView 多余字符显示省略号，并在Tooltip中显示完整信息
效果 方法一:TemplateField 关键点 TemplateField的灵活性 CSS:overflow:hidden;text-overflow:ellipsis (溢出时隐藏;文本溢出时省略 ...
- css中多余文字省略号显示
项目中很多情况都要求多余的文字要以省略号的形式展示在前端页面上.虽然用的多,但是我也不知道为啥,我始终记不住.所以,通过这种方式,让自己加深一下印象 情况一:单行文字超出规定宽度后,以省略号形式展示 ...
- CSS控制TD内的文本超出指定宽度后不换行而用省略号代替
<style type="text/css"> .lineOverflow { width: 100px; border:#000 solid 1px; text-ov ...
- 表格td标签在不添加多余标签的情况下实现文本内容单行显示，多余部分省略号表示的方法
#table { table-layout: fixed; } .content { white-space: nowrap; text-overflow: ellipsis; -o-text-ove ...
- css 控制文字显示两行,多余用省略号 手机端
p { width:100px; position:relative; line-height:20px; /*行高为高度的一半,这样就是两行*/ height:40px; overflow:hidd ...
- css多余字符显示省略号
width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; ;
- 微信小程序 wxml 文件中如何让多余文本省略号显示？
废话不多说,之前写小程序碰到了一个问题,如何在 wxml 页面中截取数据? 1.wxs 取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的. 那还有 cs ...
随机推荐
- shell脚本启动所有集群节点
#profile变量追加到.bashrc中 cat /etc/profile >> ~/.bashrc #start-all-cluster.sh 启动脚本 #!/bin/bash ec ...
- Pandas | GroupBy 分组
任何分组(groupby)操作都涉及原始对象的以下操作之一: 分割对象 应用一个函数 结合的结果 在许多情况下,我们将数据分成多个集合,并在每个子集上应用一些函数.在应用函数中,可以执行以下操作: 聚 ...
- 【LG5504】[JSOI2011]柠檬
[LG5504][JSOI2011]柠檬 题面 洛谷 题解 考虑\(dp\),令\(f_i\)表示\(dp\)到第\(i\)位且在第\(i\)位分段的最大值. 我们令题面中的\(s_i\)为\(a_i ...
- sort函数实现多条件排序
js的sort方法,我们一般传入一个回调用于单排序,也就根据某一个条件排序,那么一个场景需要多条件排序(多重排序),我们怎么处理呢? 如下例子,我们按学生的总分排序,如果总分相等,我们再按照语文成绩排 ...
- （近万字）一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备
作者 | Jeskson 来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用,详细说明HTML5的新特性和新增加元素,CSS3的新特性,新增加的选择器,新的布局,盒子模型,文本,边框,渐变, ...
- caffe解析
Caffe支持CUDA,Caffe和TensorFlow没有给出分布式的版本, 可以使用多gpu,Caffe通过直接在执行指令后面加上-gpu 0,1
- SAINT学习笔记
SAINT的介绍 SAINT(Significance Analysis of INTeractome)是一种概率方法,用于在亲和纯化-质谱(AP-MS)实验中对阴性对照的诱饵-猎物相互作用进行打分, ...
- CentOS7使用tar.gz包安装MySql的踩坑之旅
由于客户的CentOS服务器没有安装yum工具,只能通过下载tar.gz包安装mysql,于是跟着万能的百度开启了漫漫踩坑之旅: 1.下载mysql-5.6.33-linux-glibc2.5-x86 ...
- JMeter一台机器可以支持多大的并发量
Support for concurrent thread is basically depends on many factors like OS, free RAM and connections ...
- JAVA WEB项目目录结构以及web应用部署的根目录，编译路径和项目根目录的区别
本文链接:https://blog.csdn.net/l00149133/article/details/78984083 web应用部署的根目录,编译路径和项目的根目录有什么区别? 直接上例子: 你 ...