CSS를 사용하여 "·"에서 긴 문장의 끝을 생략하는 방법(여러 줄 지원)

CSS를 사용하여 "·"에서 긴 문장의 끝을 생략하는 방법(여러 줄 지원)

단행본이라면 간단하게 쓰거나 대응-webkit이면
여러 브라우저에 여러 줄을 쓰면 좀 귀찮아서 적어놨어요.

대응 방법

> 장편 기사 준비

<p class="cut_txt">長文xx～xx。<p>

위 > 의 긴 기사에 대한 CSS 준비

.cut_txt {
    position: relative;
    overflow: hidden;
    /** 行数設定 **/
    height: 3em;
    line-height: 1.5;
}
.cut_txt:before, .cut_txt:after {
    position: absolute;
    /** 塗りつぶし背景色 **/
    background: #f7f6ec;
}
.cut_txt:before {
    /** 語尾文字 **/
    content: "･･･";
    bottom: 0;
    right: 0;
}
.cut_txt:after {
    content: "";
    width: 100%;
    height: 100%;
}

먼저 Height와 line height를 지정하여 표시할 행을 결정합니다.
다음은 오버플로우:hidden;숨기다.
:before는 "・"문자를 나타내는 위요소이다.
bottom과 right를 지정하여 오른쪽 아래에 강제로 놓습니다.(absolute를 절대 위치로 함)
: 애프터 위조 요소는 "//"을 제거하는 위조 요소입니다.
부모 요소의 끝에서부터 요소와 같은 너비와 높이를 배경색으로 숨깁니다.
문자열이 짧을 때 "/"을 숨깁니다.
문자열이 길면 숨겨진 영역의 배경색을 숨깁니다.(원래 숨겨져 있는데...)

견본

1. 숲의 곰(short ver): 끝까지 가지 않는 경우.
2.숲의곰(줄바꿈ver): 줄바꿈 3줄 이상인 경우.(행 분리가 있음)
3. 숲의 곰(full ver): 세 줄 이상 더 걷는 경우.(행 분리 없음)

결점

· 중간에 줄을 바꿔도'·'는 오른쪽 하단을 벗어나 존재합니다.
・"・"은 절대적인 위치이기 때문에 문자의 중간도 상관없이 "・"이 된다.