[CSS3] 텍스트 줄 바꿈 💥텍스트 자르기

 

구글 API를 진행하면서 텍스트 줄 바꿈과 텍스트 (...) 자르기를 진행해 보았다.

내가 알던 CSS3지식을 더해 줄 수 있는 정리를 진행하고자 글을 작성하기로 하였다.

 

🎁 CSS3를 이용한 텍스트 처리에 대해 알아보도록하자! 🎁

 

 

 

 

---

 

 

⭐ white-space

 

p {white-space: nowrap;}

 

white-space 속성은 내부에서의 자동 줄 바꿈 여부를 나타내는 값을 지정합니다. 이 속성은 상속됩니다.


🪄 white-space 속성값
📌 normal : 기본값으로 글자 줄이 자동으로 바뀝니다. 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀝니다.

📌 nowrap : 줄 바꿈이 실행되지 않습니다. 즉, 콘텐츠가 다음 줄로 바뀌지 않습니다.

📌 pre : 줄 바꿈과 기타 공백이 유지됩니다. 이 가능한 값은 !DOCTYPE 선언에서 표준 준수 모드를 지정할 경우에 지원되고 !DOCTYPE 선언에서 표준 준수 모드를 지정하지 않으면 이 값을 검색할 수는 있지만 렌더링에 양향을 주지 않으며 normal 값처럼 동작합니다.

📌 pre-line : 줄 바꿈 시퀀스가 유지됩니다.

📌 pre-wrap : 줄 바꿈 시퀀스가 축소됩니다.inherit : 부모 요소로부터 값을 상속 받습니다.


⌨️ white-space DEMO VIEW 
https://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space

 

 

 

 

 

---

 

⭐ word-wrap

 

p.demo {word-wrap: break-word;}

 

word-wrap 속성은 CSS3에 추가된 속성으로 줄바꿈 모드를 설정합니다. 이 속성은 상속됩니다.

이 속성은 텍스트 줄 바꿈을 설정하거나 해제하는 white-space 속성과는 다릅니다. 
word-wrap 속성은 적용되는 언어 규칙 상에서 허용하지 않는 단어의 위치에서 줄 바꿈이 발생하도록 허용하는지 여부만 나타내는 것입니다.


🪄  word-wrap 속성값
📌 normal : 기본값으로 콘텐츠가 컨테이너 경계를 초과합니다.

📌 break-word : 콘텐츠가 다음 줄로 넘어가고 필요한 경우 단어 줄 바꿈이 발생합니다.


⌨️ word-wrap DEMO VIEW 
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

 

 

 

 

 

---

 

⭐ word-break

 

p.demo {word-break: break-all;}

 

 

word-break 속성은 CSS3에 추가된 속성으로, 단어를 기준으로 줄바꿈의 방식을 지정합니다.


🪄 work-break 속성값
📌 normal : 평소 규칙대로 단어를 분리합니다.

📌 break-all : 단어가 문자별로 분리되어 단어의 중간에도 줄 바꿈이 됩니다.

📌 keep-all : 문자별로 분리되는 것을 금지합니다.


⌨️  word-break DEMO VIEW 
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break

 

 

 

 

 

---

 

🧷 줄바꿈 없애기

 

p {
    display: inline-block;
    width: 200px;
    white-space: nowrap;
}

 

 

 

 

 

---

 

🧷 넘치는 부분 감추기

 

p {
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
}

 

 

 

 

 

 

---

 

🧷 숨긴 부분 처리

 

p {
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

 

 

 

 

 

---

 

🧷 여러 줄 단위로 자르기 + 숨김처리

 

p {
    /* 한 줄 자르기 */
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 여러 줄 자르기 추가 스타일 */
    white-space: normal;
    line-height: 1.2;
    height: 3.6em;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

 

📌 text-align: left : 글자 정렬이 양쪽 정렬이면 말 줄임표가 숨겨질 수 있으니 좌측 정렬로

📌 word-wrap: break-word : 잘라버릴 글자를 단어 단위로

📌 display: -webkit-box : 여백 삽입과 같이 유연한 높이 증가를 위해 플렉스 박스형태로 변환

📌  -webkit-line-clamp: 3 : 보여줄 줄 갯수

📌 -webkit-box-orient: vertical : 플렉스 박스의 방향 설정


크롬이나 오페라, 사파리 같은 웹킷 계열의 브라우저는 여러 줄의 글자를 자르는 자신만의 방법을 제공하고 있기에 높이나 줄 높이 설정이 필요치 않는다. 다만 크로스브라우징을 위해서 필요할 뿐이다.