CSS로 말 줄임 처리

Mar 11, 2017

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

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

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

HTML:

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

CSS:

table {
    table-layout: fixed
}

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