枠外にはみだした文字を、末尾を省略記号(…)にして非表示にする方法

枠外にはみだした文字を省略する

CSS

text-overflow: ellipsis;を使う

display: block;
max-width: 400px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

※ブロックコンテナから、インライン方向にはみ出すケースでのみ使える ※複数行の場合は-webkit-line-clampを使う

省略記号(…)以外の文字を指定できるか？

text-overflow: <string>;

かろうじてFirefoxが任意の文字列に対応しているが、その他の主要ブラウザでは非対応なので、できないと思っていいかと。