JavaScriptとHTMLで長い文字列の後に「...」を表示する方法

1. 文字列の長さを制限する関数を作成します。この関数は、指定された文字数を超えた場合に文字列を切り詰め、「...」を追加します。

function truncateString(str, maxLength) {
  if (str.length > maxLength) {
    return str.slice(0, maxLength) + '...';
  }
  return str;
}

2. HTMLの表示部分で、長い文字列を表示する要素を作成します。例えば、<h1>要素を使用します。

<h1 id="myHeading"></h1>

3. JavaScriptを使用して、要素に文字列を設定する際に、長さを制限する関数を適用します。

var myString = "長い文字列の例です。この文字列は制限されます。";
var maxLength = 10; // 表示する最大文字数
var truncatedString = truncateString(myString, maxLength);
document.getElementById("myHeading").textContent = truncatedString;

上記のコードでは、myString変数に長い文字列を設定し、maxLength変数に表示する最大文字数を指定します。次に、truncateString関数を使用して文字列を制限し、textContentプロパティを使用して要素に設定します。この例では、myHeadingというIDを持つ要素に設定しています。