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 ...
随机推荐
- IDEA+SpringBoot项目启动参数设置
SpringBoot属性加载顺序 顺序 形式 1 在命令行中传入的参数 2 SPRING_APPLICATION_JSON中的属性.SPRING_APPLICATION_JSON是以JSON的格式配置 ...
- vue watch 深度监听
watch 是vue 里非常有用的回调函数,监听数据变化,非常方便好用,但是,当监听的数据是个复杂型的数据里,里面的数据变化时普通的监听方式是监听不到的,必须使用深度监听: data() { retu ...
- 简述 asynio模块的作用和应用场景。
asyncio是Python 3.4版本引入的标准库,直接内置了对异步IO的支持. asyncio的编程模型就是一个消息循环.我们从asyncio模块中直接获取一个EventLoop的引用, 然后把需 ...
- Spring Cloud微服务安全实战_3-2_第一个API及注入攻击防护
1,本节主要讲了sql注入防范,如果使用mybatis,需要注意mapper.xml里面$会造成sql注入风险. 第一个 api 代码:https://github.com/lhy1234/sprin ...
- Python面向对象 | 类方法 classmethod
类方法:必须通过类的调用,而且此方法的意义:就是对类里面的变量或者方法进行修改添加. 例一个商店,店庆全场八折,代码怎么写呢? class Goods: __discount = 0.8 # 折扣 ...
- SPA项目开发之动态树+数据表格+分页
SPA项目开发之动态树+数据表格+分页 动态生成NavMenu导航菜单(只支持2级菜单) <el-menu key="" index=""> < ...
- innerHTML, innerText, outerHTML, outerText的区别
innerHTML:返回标签内部嵌套的子元素的所有html标签+文本内容content. innerText:返回标签内部嵌套的子元素的文本内容content. outerHTML:返回标签本身+嵌套 ...
- gcd与exgcd
gcd 辗转相除法求gcd证明 \(gcd(a, b) == gcd(b, a\%b)\) 证明: 设: \(d\)为\(a\)与\(b\)的一个公约数, 则有\(d|b\) \(d|a\) 设: \ ...
- Java 并发系列之九：java 原子操作类Atomic（13个）
1. 原子更新基本类型类 2. 原子更新数组 3. 原子更新引用 4. 原子更新属性 5. txt java 原子操作类Atomic 概述 java.util.concurrent.atomic里的原 ...
- Linux学习之编译运行.c(C语言)文件
在Linux命令行界面下,创建文件hello.c,进入vim编辑器,编辑一个简单的C语言文件 分解C语言文件执行过程,要经过预编译.编译.汇编.连接四个步骤后才能执行, 预编译:gcc -E hell ...