ホームページ > ウェブフロントエンド > CSSチュートリアル > 空白を使わずに 要素内でテキストを折り返すにはどうすればよいですか?

空白を使わずに 要素内でテキストを折り返すにはどうすればよいですか?

DDD
リリース: 2024-11-10 14:56:03
オリジナル
972 人が閲覧しました

How Do I Wrap Text Inside a <td> 要素に空白はありませんか? 
空白のない要素? " />

内で空白を使用せずにテキストを折り返すには、テキスト内に空白を許可せずに 要素内でテキストを折り返すには、次のようにします。文字の連続シーケンスの場合、いくつかの CSS プロパティを利用できます。

単語区切り: Break-all プロパティを使用すると、文字内であってもどこでも単語を分割できます。ただし、このプロパティだけではすべてのブラウザで十分ではない可能性があります。

互換性を確保し、必要な折り返し動作を実現するには、追加のプロパティを組み合わせることができます。適用:

  • 空白: -moz-pre-wrap !重要;: Mozilla ブラウザ
  • 空白: -webkit-pre-wrap;: Chrome および Safari ブラウザ
  • white-space: -pre-wrap;: Opera 4 ~ 6 ブラウザ
  • white-space: -o-pre-wrap; : Opera 7 ブラウザ
  • white-space: pre-wrap;: CSS3 準拠ブラウザ
  • word-wrap:break-word;: Internet Explorer 5.5 ブラウザ

さらに、正しくなるように、white-space:normal; プロパティを最終宣言として含める必要があります。すべてのブラウザでラップします。

このソリューションを実装するには、次の CSS クラスを に適用します。 element:

.wrapword {
    white-space: -moz-pre-wrap !important;  
    white-space: -webkit-pre-wrap;          
    white-space: -pre-wrap;                 
    white-space: -o-pre-wrap;               
    white-space: pre-wrap;                  
    word-wrap: break-word;                  
    word-break: break-all;
    white-space: normal;
}
ログイン後にコピー

次に、折り返すテキストを で囲みます。 class="wrapword" 属性を持つ要素:

<table>
    <tr>
        <td class="wrapword">
            your text here
        </td>
    </tr>
</table>
ログイン後にコピー

以上が空白を使わずに 要素内でテキストを折り返すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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