JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<dl>
  <dt>타이틀</dt>
  <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quidem sapiente beatae voluptates maxime enim ducimus, expedita, voluptas vitae distinctio! Dolor itaque, ex incidunt ut sapiente. Sapiente, dicta suscipit placeat?</dd>
  <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, debitis!</dd>
</dl>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, magnam!</p>

SCSS

* {
  padding: 0;
  margin: 0;
}
dl {
  width: 350px;
  /* display: flex;
  flex-wrap: wrap; */
  dt {
    width: 150px;
  }
  dd {
    margin-top: 14px;
    overflow: hidden;
    /* min-height: 30px; */
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-left: 15px; // 당길만큼 텍스트 영역 앞에 여백을 추가합니다.

    &::before {
      width: 5px;
      content: '|';
      margin: 0 5px 0 -10px; // 첫줄 영역을 마이너스로 해서 앞으로 당기고 텍스트 정렬을 맞춤니다.
      /* background: red; */
    }
    &:not(::first-of-type) {
      
      &::before {
        color: transparent;
      }
    }
  }
}