テキストの幅がページ幅の 62% になり、自動的に折り返されるように設定するにはどうすればよいですか? _html/css

テキストの幅がページ幅の 62% になり、自動的に折り返されるように設定するにはどうすればよいですか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:14:38

オリジナル

1395 人が閲覧しました

コードが次のとおりであるとします。

<html><body>文本内容</body></html>

ログイン後にコピー

このテキストコンテンツは非常に長いので、Web ページ全体の幅が画面の幅の 62% であることを望みます。自動的に折り返されます。

ディスカッションへの返信（解決策）

<body><div style="margin:0 19%; line-height:1.5;">档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档</div></body>

ログイン後にコピー

補足: 純粋な数字や連続した英字は使用できません。別の書き方が必要です。文字や英単語を折り返すことができます。

自動行折り返しの問題。通常の文字の行折り返しはより合理的ですが、連続した数字や英語の文字はコンテナを拡張することが多く、これは非常に厄介です。 CSS が行折り返しを実装する方法は次のとおりです

div、p などのブロックについて。 -level 要素
通常のテキストの折り返し (アジアのテキストと非アジアのテキスト) 要素にはデフォルトのwhite-space:normal があり、定義された幅の後に自動的に折り返します
html

通常のテキストの折り返し(アジア言語のテキストと非アジア言語のテキスト) 要素には、定義時にデフォルトのwhite-space:normal があります
css
#wrap{white-space:normal; width:200px; }

1. (IE ブラウザー)連続した英語文字とアラビア数字の場合は、 word-wrap :break-word ; または word-break:break-all; を使用して強制改行を実行します
#wrap{word-break:break-all;} または
# Wrap 2. (Firefox ブラウザ) 連続した英語文字とアラビア数字が壊れています。Firefox のすべてのバージョンではこの問題は解決されていません。境界を越えた文字を非表示にするか、コンテナにスクロールバーを追加することしかできません。 -break:break-all; width: 200px; overflow:auto;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

テーブルの場合

1. (IE ブラウザ) table-layout :fixed を使用します。冗長なコンテンツは非表示になります
-all; 単語の折り返し ;改行

abcdefghigklmnopqrstuvwxyz1234567890sssssssssssss
& lt;/td>

< ;/tr>

abcdefghigklmnopqrstuvwxyz 1234567890

効果: 行の折り返しが可能です

3. (IE ブラウザ) div をネストします。ぷ、 td では、th は前述の div と p の行折り返しメソッドを使用します

4 .(Firefox ブラウザ) table-layout:fixed; を使用してテーブルの幅を強制し、内部の td,th は word-break を使用します。 Break-all; または word-wrap: Break-word; 行を折り返すには、overflow:hidden; を使用します。ここでは、overflow:auto は機能しません

="75%" style="word-wrap :break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1 234567890

abcdefghigklmnopqrstuvwxyz1234567890

効果: コンテンツ以外を非表示にします

5. (Firefox ブラウザ) div、p などを td、th などにネストします。上記の方法を使用して Firefox メソッドに対処します