쉽게 쉽게

[HTML/CSS] 글자수 넘어가면 말줄임표 본문

개발공부/HTML

[HTML/CSS] 글자수 넘어가면 말줄임표

곱마2 2024. 7. 9. 17:39
반응형

▤ 목차

    1. CSS로 구현

    1. css로 구현

    <style>
    .text_area {
    	width:50px;
    	overflow: hidden;
    	text-overflow: ellipsis;
      	-webkit-line-clamp: 2;
      	-webkit-box-orient: vertical;
    	/* white-space: nowrap; */ 
    
    </style>

     

    text-overflow을 사용하기 위한 조건
    text-overflow 속성은 블록 형태인 경우에만 적용된다.
    width 또는 height가 고정적이어야 한다.
    overflow: hidden; 을 사용해 영역을 감춰야 한다.
    아래줄로 내려가는 것을 막기 위해 white-space: nowrap 등이 필요하다.

    text-overflow 적용을 하려면 가로넓이가 있어야 하기 때문에 width를 적용해 줬다.

    한 줄일 때 말 줄이기를 하고 싶으면 white-space: nowrap이 적용이 되어야 한다.

    아래는 nowrap 적용 시 표현되는 예시다.


    해당 속성이 없으면 자동으로 글자가 다음줄로 넘어가기 때문에 이러한 상황을 방지해야 한다.

    2줄 이상일 경우 white-space 속성은 필요없다.

    • overflow: hidden; : 가로 50px이 넘으면 내용 안 보이기
    • text-overflow: ellipsis; : 가로 50px이 넘으면 말줌임표(...) 표시
    • -webkit-line-clamp: 2; : 영역 내의 컨텐츠의 최대 라인 수를 결정 (2줄까지는 나옴)
    • -webkit-box-orient: vertical; : 영역 박스 내의 정렬 결정 (가로정렬)
    • withe-space : nowrap : 자동으로 줄바꿈 시키지 않는다.

    2. Javascript로 구현

    1. js로 구현

     let length = 10; // 표시할 글자수 기준
        let str = '자바스크립트로말줄임표구현하기';
        if (str.length > length) {
            str = str.substr(0, length - 2) + '...';
        }

    https://develop-obm.tistory.com/28

     

    [javascript/snippet] 말줄임 처리하기

    출력하고자 하는 넓이보다 글자수가 긴 경우에 ".."으로 말줄임 표시하는 방법 1. 자바스크립트로 처리하기 let length = 13; // 표시할 글자수 기준 let str = '자바스크립트문자열테스트중입니다.'; if (

    develop-obm.tistory.com

     

    https://shape-coding.tistory.com/entry/CSS-%ED%85%8D%EC%8A%A4%ED%8A%B8-ellipsis-%EB%A7%90%EC%A4%84%EC%9E%84-%ED%91%9C%EC%8B%9C-%EC%B2%98%EB%A6%AC-%EB%B0%A9%EB%B2%95

     

    [CSS] 텍스트 ellipsis(...) 말줄임 표시 처리 방법!

    웹페이지 작업을 하다보면 말줄임(...)이 필요한 상황이 있습니다, 말줄임을 통해서 해당 길이 더 길고 지금은 생략이 되어있다는 것을 표시할 수 있기 때문입니다. 이번에는 CSS를 이용해서 텍스

    shape-coding.tistory.com

    잘못된 내용이 있다면 지적부탁드립니다. 방문해주셔서 감사합니다.

     

     

     

    반응형

    '개발공부 > HTML' 카테고리의 다른 글

    [HTML] video 태그  (0) 2024.04.04
    [JSTL] JSTL 동적 변수  (0) 2023.10.16
    [HTML] <button> 특징  (0) 2023.07.18