ホームページ > 記事 > ウェブフロントエンド > テキストの幅がページ幅の 62% になり、自動的に折り返されるように設定するにはどうすればよいですか? _html/css_WEB-ITnose
テキストの幅がページ幅の 62% になり、自動的に折り返されるように設定するにはどうすればよいですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:14:381357ブラウズ
コードが次のとおりであるとします。
<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
c51f4459fcf422a08b11ee79272896f5通常のテキストの折り返し(アジア言語のテキストと非アジア言語のテキスト) 要素には、定義時にデフォルトの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;}
c51f4459fcf422a08b11ee79272896f5abcdefghijklmnabcdefghijklmnabcdefghijklmn11111111116b28748ea4df4d9c2150843fecfba68
テーブルの場合
1. (IE ブラウザ) table-layout :fixed を使用します。冗長なコンテンツは非表示になります
2b94abb815df9b9ee3c7b29b44ef15cb b6c5a531a458a2e790c1fd6421739d1cabcdefghigklmnopqrstuvwxyz1234567890sssssssssssss
& lt;/td>
b0879bf6ece60e8375e458255df39ca3
a34de1251f0d9fe1e645927f19a896e8
5aeaf032a8d41f7ae1f1a16c737c3078abcdefghigklmnopqrstuvwxyz 1234567890
b90dd5946f0946207856a8a37f441edf
d2ab5707718f662fa066ae8179ec88f0abcdefghigklmnopqrstuvwxyz 1234567890
b90dd5946f0946207856a8a37f441edf
< ;/tr>
f16b1740fad44fb09bfe928bcc527e08
効果: 行の折り返しが可能です
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 は機能しません
2b94abb815df9b9ee3c7b29b44ef15cb
a37ec1d19bee4ce5088aaf9330e35fadabcdefghigklmnopqrstuvwxyz1234567890b90dd5946f0946207856a8a37f441edf ="75%" style="word-wrap :break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1 234567890b90dd5946f0946207856a8a37f441edf
f16b1740fad44fb09bfe928bcc527e08
効果: コンテンツ以外を非表示にします
5. (Firefox ブラウザ) div、p などを td、th などにネストします。上記の方法を使用して Firefox メソッドに対処します