«   2022/01   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
Archives
Today
3
Total
864,826
관리 메뉴

래빗 크리스

CSS 말줄임표(...) div 와 table 에 적용하기 본문

2. 컴퓨터 이야기/프로그래밍

CSS 말줄임표(...) div 와 table 에 적용하기

래빗 크리스 2009. 3. 26. 20:16


*. DIV 나 SPAN
 → DIV 의 style 속성에 text-overflow:ellipsis; overflow:hidden 두가지를 병행하여 사용.
 → DIV 의 style 속성에 white-space:nowrap 를 사용하거나 div 태그 안에 <nobr> 태그를 사용.
 → span 태그 안에서는.. IE 에선 div 랑 같은데, Chrome 에선 말줄임 기능이 먹지 않네요..


    텍스트가 넘치는 상황에서 ellipsis 생략 처리, 넘친 부분은 hidden 안보임 처리.
    nobr 은 처음 보나요..? <br> 태그는 많이 봤죠..? <br> 이 행을 바꾸라는 것이라면 <nobr> 은 행을 바꾸지 말라는 것.
    파워포인트에서 '도형 안에 글자넣기' 옵션이 켜지면 폭을 넘어서는 글내용이 들어갈때 자동으로 개행되져..?
    이걸 하지 못하도록 한 것. 스타일 속성에서 overflow 처리를 하여도 <nobr> 태그가 없으면 말줄임표는 꽝.

    text-overflow:clip 이라든가, overflow:visible 이라고 하면 안됩니다.
    사용하면 오류가 난다는 것이 아니라 말줄임표가 안 붙는다는 것.
    그리고, 이렇게 해도 div 의 width 보다 작은 내용은 말줄임표가 붙지 않습니다.
    아래 예제에서는 <br> 태그를 중간에 사용했는데 <br> 을 전후로 각자 말줄임표가 사용됩니다.

<div style="width:200; text-overflow:ellipsis; overflow:hidden; white-space:nowrap">
   폭이 기다란 샘플을 사용해 주세요. <br>폭이 기다란 샘플을 사용해 주세요.
</div>




*. TABLE
 → table 에는 table-layout:fixed 사용
 → td 에는 text-overflow:ellipsis; overflow:hidden 사용

     overflow 에 관한 설명은 위에서 했고, table 레이아웃을 fixed 고정 처리.
     만약 이렇게 했는데도 밀려난다면 td 태그 안에 <nobr> 사용
    그리고, 이렇게 해도 td 의 width 보다 작은 내용은 말줄임표가 붙지 않습니다.
   

<table style="table-layout:fixed">
<tr>
  <td width="100" style="text-overflow:ellipsis; overflow:hidden"><nobr>1. 폭이 기다란 샘플을 사용<nobr></td>
  <td width="100" style="text-overflow:ellipsis; overflow:hidden"><nobr>2. 폭이 기다란 샘플을 사용<nobr></td>
  <td width="100" style="text-overflow:ellipsis; overflow:hidden"><nobr>3. 폭이 기다란 샘플을 사용<nobr></td>
</tr>
</table>




*. TABLE 의 TD 안에서 DIV 나 SPAN
    기본적으로는 DIV 나 SPAN 에서의 말줄임표 사용방법과 동일합니다.



*. 그리고, 추가로 말줄임표를 사용했다면 title 속성을 사용하여 말풍선을 넣어 주세요.
    속성으로 들어가다 보니 내용에 인용부호가 있으면 틀이 깨어지므로 내용에서 인용부호를 빼 주어야 합니다.
    아래 예제는 JSP 를 들어 설명하였습니다. 다른 언어는 알아서 구현하세요.. ㅜ.ㅠ

<div style="width:200; text-overflow:ellipsis; overflow:hidden" title="<%= string.replaceAll("\"","") %>">
  <nobr>폭이 기다란 샘플을 사용해 주세요. <br>폭이 기다란 샘플을 사용해 주세요.</nobr>
</div>


4 Comments
  • 프로필사진 Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2010.05.13 10:56 신고 div 에서 <nobr> 대신에 div 속성으로 WHITE-SPACE:NOWRAP; 를 사용해도 된다고 한다.
    IE6 이상 부터 지원 한답니다.

    요즘 모바일 웹이 많이 활성화 되어 있는데,
    기존 웹도 모바일 웹 형태로 간다면 div 사용으로 해결.
    생각의 전환이 필요하다고 할까..
    기존 웹과 모바일 웹을 따로 만들 필요가 없지요.
    처음부터 웹은 무조건 모바일 웹으로 가면 되니까요..

    그런데 <td>..</td> 에 사용할 때는 안 되요.
    이런 경우 <td><p>...</p></td> 와 같이 사용.
    물론 td 에 elipsis 관련 CSS 부여.
    white-space:nowrap; text-overflow:ellipsis; overflow:hidden
  • 프로필사진 Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2012.04.03 09:32 신고 이미지가 포함되어 있더라도 div 를 사용하고 본문에서 기술한 스타일을 먹이면 적용이 됩니다.
    물론, 이미지가 앞에 있어야 되구요. 이미지가 뒤에 붙는다면, 이미지 폭을 빼고 width 를 주면 됩니다.

    div 를 사용했기 때문에 뒤에 붙는 이미지가 다음 라인으로 넘어간다구요..? 에궁.. 그람 div 스타일에 float:left 를 먹이삼.
  • 프로필사진 BlogIcon yu 2020.06.17 16:45 감사합니다! ^^
  • 프로필사진 Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2020.06.17 17:40 신고 감사해요.. ㅎㅎ
댓글쓰기 폼