多行文本超出后隐藏,超出3行隐藏

番茄西红柿发布于2019-04-23 11:47 / 3511人阅读

摘要：使用插件可实现多行文本超出后隐藏的功能地址下载后项目引入多行行上代码无标题文档对象遵循常规流。对象脱离常规流，使用，，，等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

1. 使用插件 clamp.js 可实现多行文本超出后隐藏的功能 2. git地址 https://github.com/josephschmitt/Clamp.js 下载后项目引入clamp.js 3. //多行 3行　　let demo = document.getElementById(demo) 　　$clamp(demo, {clamp: 3}) 上代码：

DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档title>
    
    <script src="https://cengjingdeshuige.oss-cn-beijing.aliyuncs.com/js/clamp.js">script>
head>

<body>
<p id="demo">
 static：对象遵循常规流。top，right，bottom，left等属性不会被应用。 relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。 absolute：对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。fixed：对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。center：对象脱离常规流，使用top，right，bottom，left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。（CSS3）page：盒子的位置计算参照absolute。盒子在分页媒体或者区域块内，盒子的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3） sticky： 对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新
p>
<script>
    let demo = document.getElementById(demo)
    $clamp(demo, {clamp: 3})
script>
body>
html>

GPU云服务器云服务器隐藏超出文本 html布局超出后隐藏 html多行隐藏隐藏部分行

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1160.html

css文本超出隐藏显示省略号

摘要：如果实现单行文本的溢出显示省略号同学们应该都知道用属性来，当然还需要加宽度属来兼容部分浏览。接下来重点说一说多行文本溢出显示省略号，如下。给添加渐变背景可避免文字只显示一半。p style=width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;> 如果实现单行文本的溢出显示省略号同学们应该都...

denson 2019-04-23 11:58 评论0 收藏0
css实现文本溢出隱藏

摘要：实现文本溢出显示省略号在做响应式网页的时候，我们要想在不同尺寸的设备下保证布局不会错乱，就需要对文字的长度进行限定。 css实现文本溢出显示省略号在做响应式网页的时候，我们要想在不同尺寸的设备下保证布局不会错乱，就需要对文字的长度进行限定。基础设置在介绍下面的方法之前，我们先对所有的例子进行基础的样式设置 /*基础设置*/ div.box{ width: 100px; ...

saucxs 2019-08-30 14:12 评论0 收藏0
css实现单行、多行文本超出显示省略号

摘要：前言项目中我们经常遇到这种需求，需要对单行多行文本超出显示为省略号。单行文本省略文本溢出显示省略号文本不会换行语法默认值适用于所有元素当对象内文本溢出时不显示省略标记，而是将溢出的部分裁切掉。前言：项目中我们经常遇到这种需求，需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法，有不足之处欢迎大家指正。单行文本省略 showImg(https://segme...

wing324 2019-08-02 12:05 评论0 收藏0
css实现单行、多行文本超出显示省略号

摘要：前言项目中我们经常遇到这种需求，需要对单行多行文本超出显示为省略号。单行文本省略文本溢出显示省略号文本不会换行语法默认值适用于所有元素当对象内文本溢出时不显示省略标记，而是将溢出的部分裁切掉。前言：项目中我们经常遇到这种需求，需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法，有不足之处欢迎大家指正。单行文本省略 showImg(https://segme...

paulquei 2019-08-29 17:20 评论0 收藏0
css实现单行、多行文本超出显示省略号

摘要：前言项目中我们经常遇到这种需求，需要对单行多行文本超出显示为省略号。单行文本省略文本溢出显示省略号文本不会换行语法默认值适用于所有元素当对象内文本溢出时不显示省略标记，而是将溢出的部分裁切掉。前言：项目中我们经常遇到这种需求，需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法，有不足之处欢迎大家指正。单行文本省略 showImg(https://segme...

maxmin 2019-08-26 13:24 评论0 收藏0