ウィンドウ幅に合わせて文字数を変える

ウィンドウに合わせて文字の表示を「・・・」にしたいです。

現在のサイト（ログインしないといけないので提示できませんが）
ウィンドウの幅を変えてしまうと、文字が次の行に行ってしまいます。

使用している言語はＰＨＰで表示をしております。

以上よろしくおねがいします。

行動規範の内容に同意します

回答2件

JavascriptとPHPを組み合わせても可能ですが、
CSSで記載するのが処理も軽く、実装も簡単かと思います。

省略したい文字列が含まれた要素がp.textだった場合p.textに対して、
・overflow:hiddenではみ出た部分をカット
・white-space:nowrapで折り返し改行を禁止
・text-overflow:ellipsis;で最終文字を「･･･」に差替え

といった指定をすることで、簡単に実現可能です。
サンプルコードを置いておきますのでご参照ください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>サンプル</title>
6<style>
7.text {
8overflow:hidden;
9white-space:nowrap;
10text-overflow:ellipsis;
11}
12</style>
13</head>
14<body>
15<p class="text">幅に合わせて省略したい文字列幅に合わせて省略したい文字列幅に合わせて省略したい文字列</p>
16</body>
17</html>
18