多行文本省略

.artist .mod .info .content .abstract:after {
content: ‘...‘;
position: absolute;
right: 0;
display: block;
width: 21px;
height: 20px;
top: 20px;
font-weight: 700;
text-align: center;
background: #FAFAFA url(images/artist-intro-bg-dd0.png) repeat;
-webkit-background-size: 27px 15px;
-moz-background-size: 27px 15px;
-o-background-size: 27px 15px;
background-size: 27px 15px;
}

时间： 2024-10-08 04:21:42

多行文本省略的相关文章

单行文本与多行文本省略文本

一.单行文本省略     1.text-overflow:ellipsis;该属性用于当文本溢出的时候用省略号的方式显示.它还有一个属性值是clip(溢出部分直接裁剪掉). 2.overflow:hidden;对溢出内容进行隐藏. 3.white-space:nowrap;强制在一行显示 二.多行文本省略 用-webkit-line-clamp:number;实现,并不是css规范中的属性. 其次,用css规范属性. 可参考http://www.cnblogs.com/accordion/p/6

React中多行文本省略不生效原因

在普通的前端项目中,在不考虑兼容问题的时候,可以用以下代码实现: overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 但是在React项目之中不生效是因为在react编译后没有-webkit-box-orient: vertical; 解决方法是添加行内样式: <p style={{"WebkitBoxOr

【CSS/JS学习】如何实现单行／多行文本溢出的省略（...）--老司机绕过坑道的正确姿势

引言: 写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本: 这个文本可能是单行的: 也可能是多行的: 下面我就给大家展示如何简单或优雅地实现这种需求 单行文本溢出的省略 先上代码 <div style = 'width:400px; height:40px; border:1px solid red;'> <p style='overflow: hidden; text-overflow: ellipsis; white-spac

文本省略

单行文本省略 white-space:nowrap;/*强制文本在一行内显示*/ overflow:hidden; /*溢出内容为隐藏*/ text-overflow:clip;/*不显示省略标记(...),而是简单的裁切.*/ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...).*/ Firefox对text-overflow:ellipsis 这一属性支持不是很好. 多行文本省略 因为移动端浏览器绝大部分用的是webkit内核,所以可以用-webki

用JS解决多行溢出文本的省略问题

前言 在项目开发过程中,经常会遇到溢出文本的省略问题.根据需求,可以把文本省略分为单行文本省略和多行文本省略两类. 单行文本的省略,现在css样式 text-overflow 已经有兼容性很好的样式支持了.但是多行文本,目前支持webkit内核的css样式 -webkit-line-clamp 可以做到,但它针对火狐浏览器就行不通了.这就是本文要解决的问题. css解决方案(可跳过) 如果上网搜索[多行文本省略],除了上文提到的css样式控制,找到的答案都是做固定位置的遮盖,而且能发现的是,目前

css实现单行、多行文本超出显示省略号

前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line { border: 1px solid #f70505; padding: 8px; width: 400px; overflow: hidden; text-overflow: ellipsis; //文本溢出显示省略号 white-space: nowrap; //文本不会换行 } 语法:text-overflo

文本超出用...代替（兼容）

div{ width: 100px; height: 40px; line-height: 20px; border:solid 1px black; position: relative; // ...这里添加relative /*多行文本省略*/ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; displ

Shell命令-文件及目录操作之ls、cd

文件及目录操作 - ls.cd 1.ls:列出目录的内容及其内容属性信息 ls命令的功能说明 ls命令用于列出目录的内容及其内容属性信息. ls命令的语法格式 ls [OPTION]... [FILE]...ls [参数选项] [文件或目录] ls命令的选项说明 ls 选项很多,表1为ls命令的参数及说明: 表1:ls命令的参数及说明 参数选项 解释说明(带*的为重点) -l 长格式显示文件属性* -a 显示所有字目录和文件(包含隐藏文件)* -d 只显示目录* -i 显示Inode号 -h 人

Taro聊天室|react+taro仿微信聊天App界面|taro聊天实例

一.项目简述 taro-chatroom是基于Taro多端实例聊天项目,运用Taro+react+react-redux+taroPop+react-native等技术开发的仿微信App界面聊天室,实现了发送消息/emoj表情.gif表情大图.图片预览.发红包.动态圈等功能. 二.预览效果 编译到H5端.小程序.App端效果如下:(后续大图均为APP端) 三.技术栈 编码/技术:Vscode + react/taro/redux/RN iconfont图标:阿里字体图标库 自定义导航栏Navig