CSS Archives - kichul's blog

CSS로 말줄임 처리하는 방법이다. 여기서 width는 반드시 지정해야한다.

.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truncate {

width: 250px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

테이블에서는 다음과 같이 한다.

HTML:

<table>
    <tbody>
        <tr>
          <td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
          <td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
        </tr>
    </tbody>
</table>

<table>

<tbody>

<tr>

<td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>

</tr>

</tbody>

</table>

CSS:

table {
    table-layout: fixed
}

td {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

table {

table-layout: fixed

}

td {

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

}