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 ...
随机推荐
- vmware中桥接模式，NAT模式，主机模式的区别
桥接模式 在桥接模式下,VMWare虚拟出来的操作系统就像是局域网中的一台独立的主机(主机和虚拟机处于对等地 位),它可以访问网内任何一台机器.在桥接模式下,我们往往需要为虚拟主机配置IP地址.子网掩 ...
- swiper使用总结-坑点汇总
1.开发中遇到个坑,ScrollableTabView(选项卡)+swiper(轮播图)在安卓下,初始化的第一页不会渲染,需要在ScrollableTabView挂载完毕后再渲染swiper. 解决方 ...
- bzoj2187 fraction&&hdu3637 Find a Fraction——类欧几里得
bzoj2187 多组询问,每次给出 $a, b, c, d$,求满足 $\frac{a}{b} < \frac{p}{q} < \frac{c}{d}$ 的所有二元组 $(p, q)$ ...
- Invalid connection string format, a valid format is: "host:port:sid"
报错信息: Caused by: java.sql.SQLException: Io 异常: Invalid connection string format, a valid format is: ...
- [RN] React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中，放大报错问题
React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中,放大报错问题 报错如下: Cannot record touch end w ...
- selenium--多窗口操作
前戏 想一想,我们为什么要获取窗口句柄呢?有什么用呢? 来假设一下,我们打开了一个网站,点击了一个按钮,新打开了一个页面,我们在新页面操作完成之后,需要回到原来的页面继续操作,这时候你如果继续操作原来 ...
- 《Machine Learning - 李宏毅》视频笔记(完结)
https://www.youtube.com/watch?v=CXgbekl66jc&list=PLJV_el3uVTsPy9oCRY30oBPNLCo89yu49 https://www. ...
- SDN实验2
第二次sdn实验: 1. 利用mininet创建如下拓扑,要求拓扑支持OpenFlow 1.3协议,主机名.交换机名以及端口对应正确,请给出拓扑Mininet执行结果,展示端口连接情况. 本次使用py ...
- 使用Swagger2构建SpringMVC项目中的Restful API文档
使用Swagger自动生成API文档,不仅增加了项目的可维护性,还提高了API的透明度更利于快速测试等工作,便于更快地发现和解决问题. 本篇文章只记录整合过程,关于Security Configura ...
- gunicorn 参数
gunicorn -w 4 -b 0.0.0.0:8080 yourpyfilename:app --log-level DEBUG --timeout 60gunicorn的命令对应参数含义如下: ...