한줄효과 만드는 여러가지 방법

***

일단 구조는

-------------------

내용... 더보기

-------------------

***

참고로

... 효과가 텍스트 중간에 오는 경우가 있는데

font-family 에 영향을 받기에 그런거임.

dotum 으로 하면 중간에 생성됨.

***

그냥 간단하게 원리위주로 설명한다면

1.

내용 에 width 값을 고정적으로 주기 (더보기 가 고정)

2. 

내용 에 max-width 값으로 고정적으로 주기 (더보기 가 같이 줄어듬)

3.

더보기 에 float:right 사용하고 더보기 를 앞에 두기 (단, float:left 는 안됨) 

4.

nth-last-of-type 과 max-width 방법  

예를들어,

-------------------

내용 = nth-last-of-type(2) {max-width:250px;}

더보기 = nth-last-of-type(1) {max-width:300px;}

-------------------

하면

더보기 가 없어진다치면

내용 이 nth-last-of-type(1) {max-width:300px;} 로 적용되어

250px > 300px 로 되는 효과를 얻을수 있음

5.

display:table / table-cell 방법 (table 의 특징을 이용하기)

더보기 에 width 값 주면 

내용 이 나머지 width 값을 알아서 잡음

6.

position:absolute 와 padding-right 방법 (이건 반응형임)

더보기 를 position:absolute 로 띄우고

부모(혹은 내용) 에다가 더보기의 width 값 만큼 padding-right 를 주면 됨

7.

display:inline-block / max-width 과 padding-right 방법

부모에다 padding-right 주는거 까지는 동일한데,

내용 / 더보기 요소를 block / float 처리가 아닌

display:inline-block 으로 처리해주고

부모에다 white-space:nowrap 을 줘야 함

사실 자세한 원리는 아리송함.

float 처리를 하면 본인만의 공간으로 인식이 되어서 부모의 padding 값 같은게 포함된 상태로 100% 되어 자동줄바꿈이 되는거 같음.

display:inline-block; 의 경우에는 

공간이면서 텍스트 라는 특수한 두가지의 특징을 가지고 있어서

padding 값 같은게 미포함 100% 되니까 그냥 한줄로 쭉 나오는거 같음.

8.

display:flex + @@@ 방법

은 패스.

***

참고

https://codepen.io/piarey/pen/xWjmeo