Material-ui를 사용하여 정확히 2줄로 텍스트를 작성하고 말줄임표를 사용하는 방법

title_thumbnail(Material-ui를 사용하여 정확히 2줄로 텍스트를 작성하고 말줄임표를 사용하는 방법)

Table of Contents

Material-ui: 정확히 2줄에 걸려 생략 부호로 텍스트 작성하기

React 앱에서 Material-ui를 사용하여 디자인을 구현하는 경우, 카드에 정확히 2줄로 맞춰진 텍스트를 표시하고 긴 텍스트에 대해 생략 부호를 보여주어야 하는 요구 사항이 발생할 수 있습니다. 이를 구현하는 것은 조금 까다로울 수 있지만, 올바른 접근 방법을 사용하면 가능합니다.

첫 번째 시도: Box 구성 요소 사용

처음에는 원하는 효과를 얻기 위해 특정한 스타일 속성을 가진 Box 구성 요소를 사용해볼 수 있습니다:

<Box
  fontSize="h5.fontSize"
  component="div"
  overflow="hidden"
  textOverflow="ellipsis"
  height={70}
>
  {title}
</Box>

이 방법은 1줄 또는 2줄로 쏙 들어맞는 텍스트에 대해서는 잘 작동할 수 있습니다. 그러나 긴 텍스트의 경우 단어 이전에서 잘리는 현상이 발생하여 원하지 않는 결과를 낳을 수 있습니다. 마지막 단어가 두 번째 줄에 생략 부호로 표시되는 대신에 숨겨진 영역(세 번째 줄)에 표시될 수 있습니다.

대체 방법

해결책 1: ‘sx’ 속성을 사용하는 Typography 구성 요소

대체 방법은 Typography 구성 요소를 사용하고 ‘sx’ 속성을 활용하는 것입니다. 이 접근 방법은 Material-UI의 최신 버전에서 작동합니다. 다음 코드를 시도해볼 수 있습니다:

<Typography
  sx={{
    overflow: "hidden",
    textOverflow: "ellipsis",
    display: "-webkit-box",
    WebkitLineClamp: "2",
    WebkitBoxOrient: "vertical",
  }}
>
  {title}
</Typography>

해결책 2: CSS 규칙 적용

또 다른 접근 방법은 CSS 규칙을 사용하여 텍스트의 표시 방식을 제어하는 것입니다. ‘-webkit-line-clamp’와 ‘word-break’ 속성을 함께 사용할 수 있습니다. 다음은 예시입니다:

const useStyles = makeStyles({
  root: {
    maxWidth: 300,
  },
  media: {
    height: 100,
  },
  customBox: {
    display: "-webkit-box",
    boxOrient: "vertical",
    lineClamp: 2,
    wordBreak: "break-all",
    overflow: "hidden"
  }
});

function App() {
  const classes = useStyles();
  const title = "pos2 test long Flooooooooooooooooooooooooooooooooooo";

  return (
    <Card className={classes.root}>
      <CardMedia
        className={classes.media}
        image="https://via.placeholder.com/300x100"
      />
      <CardContent>
        <Box
          fontSize="h5.fontSize"
          component="div"
          classes={{root: classes.customBox}}
        >
          {title}
        </Box>
      </CardContent>
    </Card>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));

해결책 3: Box 구성 요소 스타일 조정

또 다른 방법으로는 Box 구성 요소의 스타일을 조정하여 원하는 효과를 얻을 수 있습니다. 다음은 예시입니다:

<CardContent style={{width: "auto"}}>
  <Box
    fontSize="h5.fontSize"
    component="div" 
    overflow="hidden"            
    whiteSpace="pre-line"
    textOverflow="ellipsis"
    height={70}          
  >
    {title}
  </Box>
</CardContent>

해결책 4: Typography 구성 요소의 noWrap 속성 덮어쓰기

Typography 구성 요소의 ‘noWrap’ 속성을 덮어쓰고 싶다면 ‘createTheme()’ 함수를 사용하여 이를 구현할 수 있습니다. 다음은 예시입니다:

const theme = createTheme({
  components: {
    MuiTypography: {
      styleOverrides: {
        noWrap: {
          whiteSpace: "initial",
          overflow: "hidden",
          textOverflow: "ellipsis",
          display: "-webkit-box",
          WebkitLineClamp: "2",
          WebkitBoxOrient: "vertical",
        }
      }
    }
  },
  // 다른 덮어쓰기
});

이러한 접근 방법을 따르면 텍스트가 정확히 2줄로 표시되고 생략 부호가 적용되는 것을 보장할 수 있습니다. 요구 사항에 가장 적합한 해결책을 선택하여 React 애플리케이션에 구현하세요.

참고 자료 :

https://stackoverflow.com/questions/64315111/material-ui-write-text-in-exactly-2-lines-with-ellipsis

같은 카테고리의 다른 글 보기 :

reactjs