个人中心
gpt4 book ai didi

How to display 2 lines with ellipsis at the end with css in react js?(如何在reaction js中用css显示末尾带省略号的2行？)

转载 作者：bug小助手 更新时间：2023-10-24 21:09:27 24 4
gpt4 key购买 nike



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 . Youtube styles work on all browsers like safari and iOS devices browsers .

我想以2行显示帖子描述，末尾有省略号。我实际上复制了检查YouTube css样式所需的样式。YouTube风格适用于所有浏览器，如Safari和iOS设备浏览器。


enter image description here


enter image description here


and I use inline styling in react js like this :

我在Reaction 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>

The problem is it doesn't on macbook safari browser or any iOS device browser but it is the same css styles that youtube has .

问题是，它不适用于MacBook Safari浏览器或任何iOS设备浏览器，但它与YouTube拥有相同的css样式。


How can I make sure that these styles work on iOS devices browsers and safari ? Is there something missing ?

我如何才能确保这些风格能在iOS设备、浏览器和Safari上运行？是不是少了什么东西？


更多回答

Can you share your current result?

你能分享你目前的结果吗？

I have no iOS devices nor do I use React, but I created a mini-tutorial comparing ellipsis with line-clamp last June on CodePen: Scaled variable text/line-clamp ellipsis comparison. This is supposed to work on iOS. Lemme know...

我没有iOS设备，也没有使用Reaction，但去年6月，我在CodePen上创建了一个比较省略和线夹的迷你教程：缩放可变文本/线夹省略比较。这应该可以在iOS上运行。让我知道。

@AloisoJunior stackoverflow.com/questions/73268136/… I've mentioned the problem here it's about direction rtl and text ellipsis on the left side in safari and iOS devices

@AloisJunior stackoverflow.com/Questions/73268136/…我在这里提到的问题是Safari和iOS设备左侧的方向RTL和文本省略号

@AloisoJunior stackoverflow.com/questions/73268136/… I've mentioned the problem here it's about direction rtl and text ellipsis on the left side in safari and iOS devices

@AloisJunior stackoverflow.com/Questions/73268136/…我在这里提到的问题是Safari和iOS设备左侧的方向RTL和文本省略号

优秀答案推荐

Try the below solution, it works fine..

试试下面的解决方案，效果很好。


on my component.js file

在我的组件.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>
   )

on my component.module.css file

在我的Component.mode.css文件上


.css{
    width: 200px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

Output with expected result

具有预期结果的输出



this problem for postcss plugin use /* autoprefixer: ignore next */ before -webkit-line-clamp: 2;

这个问题对于postcss插件的使用/*autoprefix：忽略NEXT*/BEFORE-WebKIT-LINE-CLAMP：2；


/* autoprefixer: ignore next */
-webkit-line-clamp: 2;

css - multi line line-clamp (ellipsis) doesn't work

Css-多行线夹(省略号)不起作用





.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>





style={{
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  display: '-webkit-box',
  WebkitLineClamp: 2,
  WebkitBoxOrient: 'vertical'
}}

This pretty much worked for me.

这对我来说很管用。


更多回答

stackoverflow.com/questions/73268136/… I've mentioned the problem here it's about direction rtl and text ellipsis on the left side in safari and iOS devices

STACKOVERFLOW.com/Questions/73268136/…我在这里提到的问题是Safari和iOS设备左侧的方向RTL和文本省略号

stackoverflow.com/questions/73268136/… I've mentioned the problem here it's about direction rtl and text ellipsis on the left side in safari and iOS devices

STACKOVERFLOW.com/Questions/73268136/…我在这里提到的问题是Safari和iOS设备左侧的方向RTL和文本省略号

How can I implement line-clamp with text-align:right and direction:rtl ?

如何使用Text-Align：Right和Direction：RTL实现线夹？

Add two lines text-align:right; direction: rtl;

添加两行文本-对齐：右；方向：RTL；

If it is not clear, I will explain with an example

如果不清楚，我会举例说明。

I know that but then the ellipsis disappears on iOS safari

我知道，但在iOS Safari上省略号消失了

You can check through this website if the attributes are supported on your device or not == caniuse.com

您可以通过此网站查看您的设备是否支持这些属性==caniuse.com

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

您的答案可以通过其他支持信息来改进。请编辑以添加更多详细信息，如引用或文档，以便其他人可以确认您的答案是正确的。你可以在帮助中心找到更多关于如何写出好答案的信息。

24 4 0
文章推荐： How to make sure this code runs in the correct order?(如何确保该代码以正确的顺序运行？)
文章推荐： Connect stdin and stdout to a socket(将标准输入和标准输出连接到套接字)
文章推荐： What distance measure can I use that factors in order? [closed](我可以用什么距离来衡量这些因素的顺序？[已关闭])
文章推荐： Date data- type in R programing(R编程中的日期数据类型)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com