각양각색의 문자

5263 단어 HTML CSS

긴 문장을 CSS…로 구분하는 방법자세한 페이지에 연결된 일람 페이지의 목록 표시에서 사용할 수 있습니다.

- 長い文章があったときにとても文章が長くて冗長で切り上げたいときがありますよね。
// こうなる👇
- 長い文章があったときにとても文章が長くて冗長で…

…펜치문자

라고 불릴 것 같아 좋다.
See the Pen 각양각색의 문자 by Kobashi syunsuke ( @ksyunnnn )
on CodePen .

나 이거 할래.

길다~

<section>
  <ul>
    <li> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla aliquet enim tortor at auctor urna nunc id. Venenatis cras sed felis eget. </p>
    </li>
    <li> 
      <p>Et sollicitudin ac orci phasellus egestas tellus. Enim facilisis gravida neque convallis a cras semper. Elementum tempus egestas sed sed risus pretium. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Aliquam malesuada bibendum arcu vitae elementum curabitur. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. </p>
    </li>
    <li> 
      <p>Scelerisque purus semper eget duis at tellus.</p>
    </li>
    <li> 
      <p>Diam vel quam elementum pulvinar etiam. </p>
    </li>
    <li> 
      <p>Id consectetur purus ut faucibus pulvinar elementum integer enim.</p>
    </li>
  </ul>
</section>

1. 너비

section {
  max-width: 400px;
  li {
    overflow: hidden;
    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

결과

2. 행 수에 따라 반올림

section {
  li {
    overflow: hidden;
    p {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }
  }
}

재등하다

See the Pen 각양각색의 문자 by Kobashi syunsuke ( @ksyunnnn )
on CodePen .

다른 거 있으면 알려주세요.

Reference

이 문제에 관하여(각양각색의 문자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ksyunnnn/items/8f895849de1a7e868afb

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.