javascript - 在 React 中根据高度显示更多内容

Question

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

请在这里检查我的codesandbox CLICK HERE

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

Answer 1

因为您使用的是 styled-components，所以我找到了一个很棒的实用程序包:polished.js

您会寻找 ellipsis效用。

ellipsis

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

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

示例:显示更多时显示最多 3 行，否则显示全文。

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>
  );
};

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

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;
    `}
`;

要处理不同的屏幕尺寸/响应度，您可以使用媒体查询并指定您希望最初显示的不同行数。