CSSでテキストをいい感じに省略する

text-overflow: ellipsis をつかえばいい感じに省略してくれます。

p {
    width: 150px; /* 最大幅を設定する */
    font-size: 22px;
    text-overflow: ellipsis;
    white-space: nowrap; /* これがないと最大幅を超えた部分が折り返される */
    overflow: hidden; /* これがないと最大幅を超えた部分も表示される */
}

domo