Web实现：单行文本超出省略文本溢出省略

/*
text-overflow有两个有效值：
clip：默认值，表示在内容区域的极限处截断文本；
ellipsis：表示用一个省略号(“…”)来表示被截断的文本。
强制不换行 white-space:nowrap;
隐藏超出部分 overflow:hidden;
用省略号代替剩余内容 text-overflow:ellipsis;
*/
HTML部分：

<!DOCTYPE html>
<html lang="en"><head>
<!--系统内置 start-->
<script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script>
<!--系统内置 end--><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><link rel="stylesheet" href="./index.css" /><title>单行文本超出省略</title></head><body><div class="container"><div class="title">如何评价罗永浩 2019 年 12 月 3日举办的「老人与海」黑科技发布会？是否达到了你的预期？</div><div class="txt">罗永浩的「老人与海」黑科技发布会于 12 月 3 日 19:30正式举行，这场发布会罗永浩发布了什么？是否达到了你的预期？</div></div></body>
</html>

CSS部分：

.container .title {color: #1a1a1a;font-size: 18px;line-height: 28px;font-weight: 600;margin-bottom: 10px;
}.container .txt {color: #444;font-size: 15px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
/*
text-overflow有两个有效值：
clip：默认值，表示在内容区域的极限处截断文本；
ellipsis：表示用一个省略号("…")来表示被截断的文本。
*/
/*强制不换行  white-space:nowrap;*/
/*隐藏超出部分  overflow:hidden;*/
/*用省略号代替剩余内容  text-overflow:ellipsis;*/

Web实现：单行文本超出省略文本溢出省略相关推荐

移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性在移动端时可以放心的使用h5相关的标签但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 [兼容] 下载一个 html5shiv.min.js 文件 ...
如何让文本超出部分/文本框显示省略号
(1)实现原理: 第一步: 溢出隐藏 overflow: hidden; 第二步:让文本不会换行, 在同一行继续 white-space: nowrap; 第三步:用省略号来代表未显示完的文本 tex ...
Web实现：单行文本超出省略强制不换行
HTML部分: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...
[前端] 实现单行文本溢出和多行文本溢出省略
项目中经常会用的标题或摘要超出省略的功能,从网找了一些参照,在这里写一下,希望对你有帮助... 一.单行文本溢出省略 CSS样式: <style>.box {width: 120px;he ...
html文本自动省略,css单行、多行文本溢出时自动显示省略号方法
在实际项目开发中,经常会遇到这样的需求,需要我们把单行或者多行文字溢出时自动显示省略号,今天码云笔记就为大家通过多种方法来实现本末尾省略号显示这一需求. 我们先从最原始的开始,单行文本溢出如何显示省略 ...
css控制文本超出省略（单行、两行、多行）
想要控制文本长度? 想要文本超出隐藏? 还想要不用JavaScript实现? 让我们来用css试试吧~ 本文重点 css控制文本超出省略.完成单行.两行.多行的效果注意点本文提到的方法都需要控制 ...
小技巧！CSS 整块文本溢出省略特性探究
大家好,我是若川.欢迎加我微信 ruochuan12,长期交流学习.今天的文章很有意思,讲一讲整块文本溢出省略打点的一些有意思的细节.点击下方卡片关注我,或者查看源码系列文章. 文本超长打点我们都知 ...
css控制文本超出省略...
单行文本操作省略 /**思路:1.设置inline-block属相2.强制不换行3.固定高度4.隐藏超出部分5.显示"--"*/display: inline-block;whit ...
html 文本溢出兼容,CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）
前言多行文本超出高度限制出现省略号 , 移动端多为webkit内核的 , 有扩展属性-webkit-line-clamp , 但并不是CSS规范中的属性 , PC端往往要借助js去实现这一效果,但麻 ...

Web实现：单行文本超出省略文本溢出省略

Web实现：单行文本超出省略文本溢出省略相关推荐

最新文章

热门文章