[HTML][iOS] iOS에서만 텍스트 말줄임(문자열 자르기-Ellipsis) 작동하지 않는경우

날짜:




예전에는 JSP 또는 Java로 바이트 계산해서 글자 수 줄이는 작업을 했었는데
요즘에는 CSS가 좋은 기능이 나와서 CSS자체로 텍스트 말줄임이 가능하게 되었다.

보통 아래와 같이 사용을 한다.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css">
        .title {
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div class="title">가나다라마바사아자차카타파하가나다라마바사아자차카타</div>
</body>
</html>

아래와 같이 보이게 된다.

가나다라마바사아자차카타파하가나다라마바사아자차카타




하지만 iOS 에서만 다음의 소스는 예상한대로 작동을 하지 않는다.
(아이폰에서 확인 시 가로 스크롤이 생기며 Ellipse 가 적용되지 않는다.)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,  user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
        }
        .wrap {
            width: 100%;
            height: 30px;
            margin-top: 30px;
            display: inline-block;
            background-color: #ffd4dc;
        }
        .title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>

<div class="wrap">
    <div class="title">가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사</div>
</div>

</body>
</html>



원인
Ellipsis 가 적용될 Element 와 상위의 Element 에 width 값이 없거나 100% 인 경우 Ellipse 가 적용되지 않는다.




방법
Ellipsis 가 적용될 Element 또는 상위의 Element 에 100% 가 아닌 width 값을 준다.



다음과 같이 작업 시 Ellipse 가 정상적으로 적용된다.
(하지만 해당 페이지가 다른 페이지의 iframe 으로 들어가는 경우 가로 스크롤이 그대로 남아있는 다른 문제가 발생한다.)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,  user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
        }
        .wrap {
            width: 80%;
            height: 30px;
            margin-top: 30px;
            display: inline-block;
            background-color: #ffd4dc;
        }
        .title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>

<div class="wrap">
    <div class="title">가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사</div>
</div>

</body>
</html>




iframe 에 페이지가 삽입된 경우
가로 스크롤은 처음에 iframe 안에서 텍스트의 크기만큼 window.innerWidth 값이 늘어났기 때문에 발생을 한다.
텍스트의 가로 길이를 처음에 0으로 셋팅 하고 DOM 구조 생성 후 width 값을 강제로 잡아준다.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,  user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
        }
        .wrap {
            width: 0;
            height: 30px;
            margin-top: 30px;
            display: inline-block;
            background-color: #ffd4dc;
        }
        .title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.wrap').css('width', window.innerWidth * 0.8);
        });
    </script>
</head>
<body>

<div class="wrap">
    <div class="title">가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사</div>
</div>

</body>
</html>



댓글

댓글 쓰기