Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

テキストがJavaScriptで含まれている要素をオーバーフローした場合はどうすればよいですか？

textOverflowを使用する テキストオーバーフローの問題に対処するためのプロパティ。テキストが含まれている要素をオーバーフローする場合は、省略記号を追加します。

例

次のコードを実行して、テキストがJavaScriptで含まれている要素をオーバーフローしたときに何をすべきかを学ぶことができます-

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            border: 2px solid blue;
            background-color: gray;
            overflow: hidden;
            text-overflow: visible;
            width: 200px;
            white-space: nowrap;
         }
      </style>
   </head>
   <body>
      <button onclick = "display()"> Click </button>
      <div id = "myID">
         This is Demo Text! This is Demo Text! This is Demo Text!<br>
         This is Demo Text! This is Demo Text! This is Demo Text!<br>
         This is Demo Text! This is Demo Text! This is Demo Text!<br>
         This is Demo Text! This is Demo Text! This is Demo Text!<br>
      </div>
      <script>
         function display() {
            document.getElementById("myID").style.textOverflow = "ellipsis";
         }
      </script>
   </body>
</html>

  1. JavaScriptで要素ボックスの外側にレンダリングされるコンテンツをどうするか？

    コンテンツが要素ボックスの外側にレンダリングされる場合は、オーバーフローを使用します スクロールを追加するプロパティ。これにより、訪問者はコンテンツ全体を読みやすくなります。 例 次のコードを実行して、JavaScriptでオーバーフロープロパティを操作する方法を学ぶことができます- <!DOCTYPE html> <html>    <head>       <style>          #box {     &nbs

  2. JavaScript-スパン要素のテキストを取得します

    JavaScriptでspan要素のテキストを取得するには、コードは次のとおりです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style&g