ボックス内のテキスト略語効果

    li  {
      display: block;  /* 블록 요소인 경우는 이 속성 생략 */
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

例)

  <ul>
    <li><a href="#">1) 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</a></li>
    <li><a href="#">2) 남산 위에 저 소나무 철갑을 두른듯
바람서리 불변함은 우리 기상일세</a></li>
    <li><a href="#">3) 가을 하늘 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세</a></li>
    <li><a href="">4) 이 기상과 이 마음으로 충성을 다하여
괴로우나 즐거우나 나라사랑하세</a></li>
</ul>

このように書かれたコードは以下の通り

    li > a {
      white-space: nowrap;
    }

    li > a {
      display: block;  /* a태그는 인라인 요소이기 때문에 블록으로 바꿔준다*/
      overflow: hidden;
      white-space: nowrap;
    }

    li  {
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

複数行の略語

  li {
    white-space: normal;
    line-height: 20px;
    max-height: 40px;      /* (line-height x 라인 수) */
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  * 크롬, 오페라, 사파리 등의 webkit 계열이 아닌 브라우저 (IE, firefox 등)에서는 
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    동작하지 않기 때문에, max-height 속성을 넣어줘야 함
    
    하지만,, 다른 브라우저에서는 말줄임(...)이 나타나지 않음,,ㅜ
    방법을 알아봐야 겠다