CSS를 이용한 말줄임 효과에 대해서 알아보자.

 

1. DIV나 P 태그에 말줄임 효과를 주기 위해서는

<div(p) style=”text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 500px;”>~~~~~</div(p)>와 같이 하면 된다. 

 

2. TABLE의 TD에 말줄임 효과를 주기 위해서는 

<table style=”table-layout: fixed;”>

    <tr>

        <td style=”text-overflow: ellipsis; overflow: hidden;”><nobr>~~~~~~</td>

    <tr>

</table>

와 같이 하면 된다.

 

혹은 

<table>

    <tr>

        <td>

            <div(p) style=”text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 500px;”>~~~~~</div(p)>

        </td>

    <tr>

</table>

와 같이 하면 된다.