ホームページ > ウェブフロントエンド > CSSチュートリアル > 表のセルのコンテンツを HTML で折り返す方法

表のセルのコンテンツを HTML で折り返す方法

DDD
リリース: 2024-10-27 08:57:03
オリジナル
666 人が閲覧しました

How to Make Table Cell Content Wrap in HTML?

表のセルを強制する方法 ラップするコンテンツ

提供されたコードの 内のテキストは、要素は送信時に引き伸ばされます。この問題を解決し、テキストがセル内で折り返されるようにするには、次の手順を実行します。

解決策

  1. テーブル レイアウト:
    テーブルを追加-layout: に固定要素。この属性は、テーブルが固定レイアウトになり、その列が指定された幅になるように指定します。

  2. ワードラップ:
    < に word-wrap:break-word を追加します。 ;td>要素。このプロパティにより、表のセル内でのワードラップが有効になり、長いテキストを複数の行に分割できるようになります。
  3. Example

    <html><br><head> <br> <style><br> テーブル {border-collapse:collapse;テーブルレイアウト:固定; width:310px;}<br> table td {border:solid 1px #fab;幅:100ピクセル; word-wrap:break-word;}<br> </style><br></head></p>
    <p><body><br> <table></p>
    <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">  <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
    ログイン後にコピー




    デモ:



    table {border-collapse:collapse;テーブルレイアウト:固定; width:310px;}</p>
    <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
    ログイン後にコピー

           <表></p>
    <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">      <tr>
             <td>1</td>
             <td>Lorem Ipsum</td>
             <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
          </tr>
          <tr>
             <td>2</td>
             <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
             <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
          </tr>
          <tr>
             <td>3</td>
             <td></td>
             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
          </tr>
       </table>
    
    ログイン後にコピー

    以上が表のセルのコンテンツを HTML で折り返す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート