긴 문자열이나, 1byte 문자열이 쭈욱~ 있을 경우.. 레이아웃이 틀어지는 현상이 발생 될 수 있습니다.
여기서 할 수 있는 방법이 라인 변경이나, 문자열을 … 처리 하는 방법이 있는데.
오늘은 … 처리하는 방법을 알아보도록 하겠습니다.
위와 같은 형태로 처리하는 방법에 대해서 알아보도록 하겠습니다.
위 방법은 text-overflow라는 css를 이용하게 되는데 ie6, Opera, firefox 등에서는 몇 가지 추가적인 사항이 있습니다.
일단 처리된 css를 보십니다.
.ellipsis{
white-space:nowrap;
text-overflow:ellipsis; /* IE, Safari */
-o-text-overflow:ellipsis; /* Opera under 10.7 */
overflow:hidden; /* "overflow" value must be different from "visible" */
-moz-binding: url('ellipsis.xml#ellipsis');
}
text-overflow, overflow ie7, ie8, safari에서는 다음 속성으로 조절이 가능하나 다른 브라우저에서는 아래와 같이 추가되어야 합니다.
ie6 : width (style로 정의 되어야 하며, <div width=”100%” 와 같은 attribute로는 지원되지 않습니다.
opera : -o-text-overflow (오페라 버전이 10.7 이후부터 적용가능)
firefox : -moz-binding: url('ellipsis.xml#ellipsis');
현재 지원 되지 않아 description 속성을 이용하여 처리되어야 합니다.
-- 2011.04.06 추가 내용
firefox 4.* 으로 버전 업되면서 xml을 이용한 처리가 되지 않는다고 합니다.
자세한 내용은 아래 블로그에서 확인하시기 바랍니다.
CSS 말줄임 처리의 브라우저 호환성 문제
firefox를 위한 xml은 아래와 같습니다.
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="ellipsis">
<content>
<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
</content>
</binding>
</bindings>
좀 더 자세한 내용은 아래 링크를 참고하시기 바랍니다.
https://developer.mozilla.org/En/CSS/Text-overflow
https://developer.mozilla.org/en/XUL/description
이제 본격적으로 적용 방법입니다.
일단 div에서는 class에 제가 선언한 ellipsis, width만 추가되면 됩니다.
<div class="ellipsis" style="width:50%; border:solid 1px black;" title="(변경 전)나는 자랑스러운 태극기 앞에 조국과 민족의 무궁한 영광을 위하여 몸과 마음을 바쳐 충성을 다할 것을 굳게 다짐합니다."> (변경 전)나는 자랑스러운 태극기 앞에 조국과 민족의 무궁한 영광을 위하여 몸과 마음을 바쳐 충성을 다할 것을 굳게 다짐합니다. </div>
다음은 테이블입니다.
<table width="50%" border="1" style="table-layout:fixed;" cellspacing="1" cellpadding="1"> <tr> <td> <div class="ellipsis" style="width:100%;"> (변경 후)나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 발전을 위해 충성을 다할 것을 굳게 다짐합니다.(변경 후)나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 발전을 위해 충성을 다할 것을 굳게 다짐합니다.</div></td> <td style="width:30px; text-align:center;">1</td> <td style="width:30px; text-align:center;">2</td> </tr> </table>
테이블로 처리 되는 경우에는 반듯이 style 속성에 table-layout:fixed 값이 설정되어야 합니다.
그리고 점선 처리되어야 할 컬럼에만 width 속성을 뺀 다른 곳에는 반듯이 width 속성이 들어가야 됩니다.
그래야지 테이블을 유지합니다.
테이블의 width를 persent로 설정한 이유는 테이블 사이즈의 변경 모습을 확인하기 위함이며, 말줄임 처리 되는 컬럼에 width 값은 100%를 주어 꽉차게 만든 상태입니다.
td에 ellipsis를 바로 적용할 수 없으며, div로 감싸게 되는 이유는 에… 예전에 들었는데..
제가 개발자라.. 잊어버렸습니다. ㅡ.ㅡ;;;; 퍼블리셔분들은 꼭 알고 있어야 할 내용이었는데요 *_*;;;;;
아무튼 div로 감싸야 됩니다. ㅡ.ㅡ;;;;
이렇게 되면 테이블 사이즈가 변경되어도 함께 말줄임 사이즈도 변경될 수 있습니다.
ul, li에 적용 방법은 다음과 같습니다…
뭐.. 위와 동일하다고 생각하시면 되는데 sample이라고 생각하시면 좋을 듯 합니다.
#ul li {
white-space:nowrap;
text-overflow:ellipsis; /* IE, Safari */
-o-text-overflow: ellipsis; /* Opera under 10.7 */
overflow:hidden; /* "overflow" value must be different from "visible" */
-moz-binding: url('ellipsis.xml#ellipsis');
width:100%;
}
<ul id="ul" style="width:50%; border:solid 1px black; list-style-image:none; list-style-type:none; padding:0; margin:0;">
<li>
<a style="cursor:hand; cursor:pointer;" onclick="alert('li_1 click');">
li_1 (변경 후)나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 발전을 위해 충성을 다할 것을 굳게 다짐합니다.(변경 후)나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 발전을 위해 충성을 다할 것을 굳게 다짐합니다.</a></li>
<li>
li_2
<ul>
<li>li_child___li_child___li_child___li_child___li_child___li_child___li_child___li_child___li_child___li_child___</li>
</ul>
</li>
</ul>
이렇게 하시면 cross browser 말줄임이 구현됩니다.
감사합니다.
'Developer' 카테고리의 다른 글
| 개발자를 위한 웹 표준 HTML의 이해 2(Block elements, Inline elements) (0) | 2011.02.15 |
|---|---|
| 개발자를 위한 웹 표준 HTML의 이해 1(DTD[Document Type Definition]) (0) | 2011.02.15 |
| Silverlight 4 개발 환경 구성하기 (4) | 2011.02.08 |
| SharePoint 2010 배포 시 지정한 경로 및/또는 파일 이름이 너무 깁니다. (0) | 2011.01.19 |
| Visual Studio 2010 and .NET Framework 4 Training Kit (2) | 2011.01.19 |
