如何在反应js中用css显示2行带有省略号的行？
如何在反应js中用css显示2行带有省略号的行？
提问于 2022-07-15 18:54:55
我想显示两行文章描述与省略在末尾。实际上，我从youtube css样式中复制了所需的样式。Youtube样式适用于所有浏览器，如safari和iOS设备浏览器。
我使用内联样式来响应js，如下所示：
<span
style={{
lineHeight: "2rem",
fontWeight: "500",
maxHeight: "4rem",
overflow: "hidden",
display: "-webkit-box",
textOverflow: "ellipsis",
whiteSpace: "normal",
WebkitLineClamp: 2,
WebkitBoxOrient: "vertical",
msTextOverflow: "ellipsis",
}}
>
{description}
</span>问题是，它没有在macbook浏览器或任何iOS设备浏览器上，但它是相同的css风格的youtube。
如何确保这些样式在iOS设备、浏览器和safari上工作？有什么东西不见了吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-08-06 07:00:26
试试下面的解决方案，效果很好。
在我的component.js文件上
import React, { useEffect, useState } from "react";
import classes from "./component.module.css"
export const Component = () => {
return (
<div className={classes.css}>
I want to display post description in 2 lines with ellipsis at the end. I actually copied the styles needed from inspecting youtube css styles .
</div>
)在我的component.module.css文件上
.css{
width: 200px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
Stack Overflow用户
发布于 2022-08-05 22:47:25
这个问题适用于后置插件使用/* autoprefixer: ignore next */之前的-webkit-line-clamp: 2;。
/* autoprefixer: ignore next */
-webkit-line-clamp: 2; Stack Overflow用户
发布于 2022-08-12 13:27:32
.lines {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
box-orient: vertical;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
padding :0 2rem
}<div class='lines'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72998524
复制相关文章
相似问题
腾讯云开发者
