내용길이 따라 자동으로 …을 붙여주는 친절한 CSS씨

아마 지난주 어느분이 이게 안된다고 했던 기억에 잠시… 😉
간단히 range 라는 생소한 type의 Input 태그를 이용.
box의 width는 range 태그의 변경된 값을 따르고 box는 담고있는 내용의 길이에 따라 … 을 자동으로 붙여준다.

<html>
<head>
</head>
 
<body>
    <p>
        <input type="range" min="0" max="600" value="300" step="5" onchange="document.getElementById('box').style.width=this.value;" />
    </p>
 
    <p id="box" style="overflow-x:hidden; overflow-y:hidden; width:200px; text-overflow:ellipsis; line-height:1.8em; border:solid 1px red;">
        <nobr>
            <a href="http://goo.gl/DzU5l">나는 가수다 - 윤민수 '그리움만 쌓이네' 무편집 영상 보기</a>
        </nobr>
    </p>
</body>
</html>

jsFiddle DEMO

%d bloggers like this: