스타일시트로 최대 개행 수를 제한해요

최대 줄바꿈 수를 제한하면 긴 문장을 표현하기 좋아져요.

1. css 살펴보기.

행간이 되는 글자 높이를 line-height 값으로 고정하고, 행간에 배수가 max-height em값으로 주어지면 줄바꿈이 생기는 길이를 알 수 있어요. 스크롤이 생기는 영역은 overflow:hidden을 주어 숨기면 되겠쩌.

p{max-height:5.6em;line-height:1.4;overflow:hidden;text-overflow:elipsis}
<p>1<br>2<br>3<br>4<br>5</p>

developer.mozilla.org - line-height

</div>
                    
        <div class="revenue_unit_wrap">
  <div class="revenue_unit_item adfit">
    <div class="revenue_unit_info">728x90</div>
    <ins class="kakao_ad_area" style="display: none;" data-ad-unit="DAN-QCdDUu1DnbqA965C" data-ad-width="728px" data-ad-height="90px"></ins>
    <script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async="async"></script>
  </div>
</div>

<div class="container_postbtn #post_button_group">
  <div class="postbtn_like"><script>window.ReactionButtonType = 'reaction';
window.ReactionApiUrl = '//catty.tistory.com/reaction';
window.ReactionReqBody = {
    entryId: 118
}</script>
<div class="wrap_btn" id="reaction-118" data-tistory-react-app="Reaction"></div><div class="wrap_btn wrap_btn_share"><button type="button" class="btn_post sns_btn btn_share" aria-expanded="false" data-thumbnail-url="https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png" data-title="스타일시트로 최대 개행 수를 제한해요" data-description="최대 줄바꿈 수를 제한하면 긴 문장을 표현하기 좋아져요.                                                        1. css 살펴보기.행간이 되는 글자 높이를 line-height 값으로 고정하고, 행간에 배수가 max-height em값으로 주어지면 줄바꿈이 생기는 길이를 알 수 있어요. 스크롤이 생기는 영역은 overflow:hidden을 주어 숨기면 되겠쩌.p{max-height:5.6em;line-height:1.4;overflow:hidden;text-overflow:elipsis}12345 developer.mozilla.org - line-height 🐾 이미지 보기" data-profile-image="https://tistory1.daumcdn.net/tistory/4667777/attach/a694cf0ea8484c42aecb654933e2c81b" data-profile-name="Cattiy" data-pc-url="https://catty.tistory.com/entry/css-max-line-height" data-relative-pc-url="/entry/css-max-line-height" data-blog-title="Cattiy Lab"><span class="ico_postbtn ico_share">공유하기</span></button>
  <div class="layer_post" id="tistorySnsLayer"></div>
</div><div class="wrap_btn wrap_btn_etc" data-entry-id="118" data-entry-visibility="public" data-category-visibility="public"><button type="button" class="btn_post btn_etc2" aria-expanded="false"><span class="ico_postbtn ico_etc">게시글 관리</span></button>
  <div class="layer_post" id="tistoryEtcLayer"></div>
</div></div>
<button type="button" class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="4667777" data-url="https://catty.tistory.com/entry/css-max-line-height" data-device="web_pc" data-tiara-action-name="구독 버튼_클릭"><em class="txt_state"></em><strong class="txt_tool_id">Cattiy Lab</strong><span class="img_common_tistory ico_check_type1"></span></button>  <div data-tistory-react-app="SupportButton"></div>
</div>

스타일시트로 최대 개행 수를 제한해요

1. css 살펴보기.

댓글쓰기

댓글 삭제

댓글 개