在 React 中根据身高显示更多信息 [英] Show more based on height in React

问题描述

我已经成功地实现了更多显示/更少显示.我的问题是我想根据屏幕的行数或高度来实现它.我不希望它基于字符数，因为它在某些屏幕上看起来很糟糕.就像在大屏幕上有点切，而在小屏幕上太长.

请在这里检查我的代码和框

您似乎在另一个答案中提到您不想添加任何新的依赖项，所以这里是通过 ellipsis 实用程序应用的 CSS.不过，如果可以的话，我仍然建议将 polished 添加到您的项目中，因为它有许多 有用的样式实用程序，我发现它非常宝贵.

import styled, { css } from "styled-components";const DescriptionText = styled.div`字体大小:14px；边距顶部:20px；底边距:20px；${({ showMore }) =>显示更多&&css`显示:-webkit-box；最大宽度:100%；溢出:隐藏；文本溢出:省略号；空白:正常；自动换行:正常；-webkit-box-orient:垂直；-webkit-line-clamp: 3;`}`;

要处理不同的屏幕尺寸/响应能力，您可以使用媒体查询并指定您想要初始显示的不同行数.

I have successfully implemented the show more/show less. My problem is that I want to achieve it based on the number of lines or height of the screen. I don't want it to be based on number of characters since it would look bad on certain screens. like kinda cut on larger screen while too long on small screens.

Pls check my codesandbox here CLICK HERE

  <DescriptionText>
    {isShowMore ? text.slice(0, 300) : text}
  </DescriptionText>
  {text && text.length > 300 && (
    <ShowMoreText onClick={toggleReadMore}>
      {isShowMore ? "Show more..." : "Show less"}
    </ShowMoreText>
  )}

解决方案

Since you are using styled-components I've found a great utility package for it: polished.js

You would be looking for the ellipsis utility.

ellipsis

CSS to represent truncated text with an ellipsis. You can optionally pass a max-width and number of lines before truncating.

ellipsis(width: (string? | number?)?, lines: number): Styles

Example: Display up to 3 lines when show more, otherwise full text.

import { ellipsis } from 'polished';

...

const DescriptionText = styled.div`
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 20px;
  ${({ showMore }) => showMore && ellipsis(undefined, 3)}
`;

...

const Description = () => {
  const [isShowMore, setIsShowMore] = useState(true);
  const toggleReadMore = () => setIsShowMore(show => !show);

  return (
    <MainContainer>
      <TitleText>Description</TitleText>
      <DescriptionText showMore={isShowMore}>{text}</DescriptionText>
      <ShowMoreText onClick={toggleReadMore}>
        {isShowMore ? "Show more..." : "Show less"}
      </ShowMoreText>
    </MainContainer>
  );
};

You seem to have mentioned in another answer that you don't want to add any new dependencies, so here is the CSS that is applied via the ellipsis utility. Though, I'd still recommend adding polished to your project if you can as it has many useful styling utilities I've found fairly invaluable.

import styled, { css } from "styled-components";

const DescriptionText = styled.div`
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 20px;
  ${({ showMore }) =>
    showMore &&
    css`
      display: -webkit-box;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      word-wrap: normal;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    `}
`;

To handle different screen sizes/responsiveness you can use media queries and specify a different number of lines you want to initially display.

这篇关于在 React 中根据身高显示更多信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！