Cssは文字を改行に折り返します。 単語のハイフネーション。 適合しない単語のハイフネーションをオンにする
説明
white-spaceプロパティは、単語間のスペースを表示する方法を設定します。 通常の状況では、HTMLコード内の任意の数のスペースがWebページ上に1つとして表示されます。 例外はタグです
このコンテナに配置されたテキストは、ユーザーがフォーマットしたとおりにすべてスペースで表示されます。 したがって、空白はタグの動作を模倣します。ただし、それとは異なり、フォントは等幅に変更されません。構文
空白:通常| nowrap | プレ| プレライン| プレラップ| 継承する
その価値
通常のテキストは通常どおりブラウザウィンドウに表示され、改行は自動的に設定されます。 nowrap空白は無視され、HTMLコードでは改行は無視され、すべてのテキストが1行に表示されます。 ただし、タグを追加する
テキストを新しい行に折り返します。 preテキストは、開発者がHTMLコードで追加したすべてのスペースとハイフンを含めて表示されます。 行が長すぎてブラウザウィンドウに収まらない場合は、水平スクロールバーが追加されます。 前行スペースはテキストで考慮されません。指定された領域に収まらない場合、テキストは自動的に次の行に折り返されます。 pre-wrapすべてのスペースと区切りはテキストに保持されますが、行幅が指定された領域に収まらない場合、テキストは自動的に次の行に折り返されます。 継承親から値を継承します。テキストに対する値の影響を表に示します。 1.1。
HTML5 CSS2.1 IE Cr Op Sa Fx
空白 例
フェルマーの最終定理
NS NS+ Y NS= Z NS
ここで、nは2より大きい整数です。この例の結果を図1に示します。 1.1。
米。 1.空白プロパティを適用する
オブジェクトモデル
document.getElementById( "elementID")。style.whiteSpace
ブラウザ
7.0までのInternetExplorerは、pre-line、pre-wrap、およびinheritをサポートしていません。 にとって
バージョン9.5より前のOperaは、pre-line値をサポートしていません。 にとって
3.0より前のSafariおよびiOSは、プリラップおよびプリライン値をサポートしていません。
バージョン2.0までのFirefoxは、pre-lineおよびpre-wrap値をサポートしていません。 にとって
長い単語を折り返す方法を決定します。
- ダッシュ、スペース、またはEnterがある場合のみ(ノーブレークスペースおよびノーブレークハイフン-を除く)。 ハイフンは、1つの単語の一部(たとえば、赤と黄色)の間、単語の間(ダッシュ)に記述されます。 「ソフトハイフン」-ハイフンが必要な場合にのみ表示されます。 単語が親の範囲外である場合、
または、ハイフンなしでその一部を転送します。 マイナスは数式で使用されます(たとえば、5-2)。 電話番号にはデジタル回線が表示されます(例:+ 7 800 000‒00‒00)。 そして、これはすべてそれほど馴染みのないものではありません-それはキーボードにあります。 - 任意の文字の後。
- 自動ハイフネーションを使用したロシア語の規則に従います。
オーバーフローラップ
ワードラップ
ワードブレイク
改行
ハイフン私たちの199キログラムはすでに再検討されています grubber-bulldozer-loader
lang = "ru"lang = "ru">私たちの199はすでに再検討されています - キログラムグラバー-ブルドーザーローダーある物件と別の物件の違いは何ですか
デフォルトでは、長い単語はハイフンで明示的に示されない限りハイフンでつながれず、改行で始まります。
すぐに目に見える行を無視するために、word-breakを追加します。 ..。
ブラウザがソフトハイフンに注意を向けないようにするために、ハイフンを挿入します。 ..。
ワードラップが必要な場合は、word-wrap:break-word; すべてのブラウザで理解できるので、常に使用することをお勧めします。 これはword-breakとは異なります。break-all; これは、ブロックに収まらない単語が新しい行で始まり、ソフトハイフンの推奨事項が尊重されるという点で優先されます。
一緒に使用する場合、word-break:break-all; ハイフン付き:auto; 、後者は無視されます。 ハイフン:自動; 適切と思われるハイフンを配置します。 ただし、これを機能させるには、divでlang = "ru"属性を指定して言語を指定する必要があります。
単語を別の行に折り返さないでください
メニュー項目やボタンが壊れると見栄えが悪いとしましょう。 したがって、それらの分離を禁止する必要があります。 このためには、上記のすべてのプロパティを「デフォルト」モードに設定して追加する必要があります。 クリックしてポリゴンを見てください。
ハイフンのワードラップを制御します:auto;
テトラヒドロピラニルシクロペンチルテトラヒドロピリドピリジン
テトラヒドロピラニルシクロペンチルテトラヒドロピリド ピリディーノ高い短い情報
CSSバージョン
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
説明
white-spaceプロパティは、単語間のスペースを表示する方法を設定します。 通常の状況では、HTMLコード内の任意の数のスペースがWebページ上に1つとして表示されます。 例外はタグです
このコンテナに配置されたテキストは、ユーザーがフォーマットしたとおりにすべてスペースで表示されます。 したがって、空白はタグの動作を模倣します。ただし、それとは異なり、フォントは等幅に変更されません。構文
空白:通常| nowrap | プレ| プレライン| プレラップ| 継承する
その価値
通常のテキストは通常どおりブラウザウィンドウに表示され、改行は自動的に設定されます。 nowrap空白は無視され、HTMLコードでは改行は無視され、すべてのテキストが1行に表示されます。 ただし、タグを追加する
テキストを新しい行に折り返します。 preテキストは、開発者がHTMLコードで追加したすべてのスペースとハイフンを含めて表示されます。 行が長すぎてブラウザウィンドウに収まらない場合は、水平スクロールバーが追加されます。 前行スペースはテキストで考慮されません。指定された領域に収まらない場合、テキストは自動的に次の行に折り返されます。 pre-wrapすべてのスペースと区切りはテキストに保持されますが、行幅が指定された領域に収まらない場合、テキストは自動的に次の行に折り返されます。 継承親から値を継承します。テキストに対する値の影響を表に示します。 1.1。
HTML5 CSS2.1 IE Cr Op Sa Fx
空白 例
フェルマーの最終定理
NS NS+ Y NS= Z NS
ここで、nは2より大きい整数です。この例の結果を図1に示します。 1.1。
米。 1.空白プロパティを適用する
オブジェクトモデル
document.getElementById( "elementID")。style.whiteSpace
ブラウザ
7.0までのInternetExplorerは、pre-line、pre-wrap、およびinheritをサポートしていません。 にとって
バージョン9.5より前のOperaは、pre-line値をサポートしていません。 にとって
3.0より前のSafariおよびiOSは、プリラップおよびプリライン値をサポートしていません。
バージョン2.0までのFirefoxは、pre-lineおよびpre-wrap値をサポートしていません。 にとって
Vlad Merzhevich
印刷のテキストとは異なり、ハイフネーションがWebページで使用されることはめったにありません。これは、用紙サイズに厳密に縛られていないためです。 Webサイトは、さまざまなオペレーティングシステムとブラウザーで、さまざまなモニター、さまざまな解像度で表示できます。 これはすべて、最終的なテキストがユーザーをどのように検索するかを予測することが不可能な組み合わせの組み合わせを引き起こします。 このため、テキストは通常、左揃えで単語全体としてハイフンでつながれます。 しかし、それでも、美学のために、特定の幅の狭い列で長い化学用語または医学用語が使用されている場合など、場合によってはハイフネーションが必要になります。 HTMLとCSSでは、ハイフネーションを追加する手動または自動の方法はそれほど多くないので、それらすべてをリストします。
タグを使用する
鬼ごっこ
HTML5で導入され、必要に応じてワードラップを作成します。 ロシア語の規則に従って転送が許可されている場所では、次のように挿入します (例1)。 単語全体が割り当てられた幅に収まる場合、このタグはまったく表示されず、その存在についてもわかりません。 単語が収まらない場合、ブラウザはタグの場所にあります 転送を作成します。 例1.タグ
転送 一つ
supradiclas 学校を卒業した後、スニッチアンジェリカはビジネスの職業を選びました 製造 運転者 顔。 この例の結果を図1に示します。 1.1。
米。 1.ワードラップ付きのテキスト
ソフト転送
応用
重大な欠点があります。ハイフンが私たちの前にあるのか、別の行の別の単語にあるのかを理解することは不可能です。 このため、文の意味が失われ、誤解される可能性があります。 ハイフンは、タイポグラフィの規則に従って実行する必要があります。つまり、行の最後にハイフンを追加します。 ソフトハイフンはこれをうまく処理します。HTMLコードには特別な記号があります-。 タグと同じ役割を果たします -通常のテキストでは表示されず、ハイフンを追加しながら単語を別の行に折り返します(例2)。 例2.ソフトキャリー
転送 11級のスニツァアンジェリカは、学校を卒業した後、ビジネスプロデューサードライバーの職業を選びました。
この例の結果を図1に示します。 2.図と比較して、テキストがどれほど美しく、理解しやすいものになったかに注目してください。 1.1。
米。 2.ワードラップ付きのテキスト
ワードブレイクプロパティ
ハイフンを作成するプロセスを自動化するには、break-all値でword-breakプロパティを使用します(例3)。 HTMLに記号やタグを追加する必要はありません。すべてがスタイルに引き継がれます。
例3.ワードブレイクの使用
転送 学校を卒業した後の11年生のアンジェリカは店員の職業を選びました。
この例の結果を図1に示します。 3.この場合、ハイフネーションの規則は考慮されないため、単語は非常に奇妙な方法でハイフネーションされる可能性があります。
米。 3.ワードラップ付きのテキスト
リストされているすべての方法の中で、「半手動」を使用して-最良の結果が得られます-ロシア語の規則が守られ、テキストは最も美的に心地よく見えます。 テキストに長い単語がある場合に使用します。
ハイフンプロパティ
そして最後に、ハイフンを自動的に追加するための最も強力で便利なプロパティはハイフンです。 そのアクションはブラウザの組み込みハイフネーション辞書に基づいているため、最良の結果が得られます。 IE10、Firefox、Android、iOSでサポートされています。 ChromeとOperaはサポートしていません。 それをすべて機能させるために、タグのために lang属性に値ruを追加します(例4)。
例4.ハイフンの使用
転送 学校を卒業した後の11年生のアンジェリカは店員の職業を選びました。
この例の結果を図1に示します。 4.4。
米。 4.ワードラップ付きのテキスト
ハイフネーションを防ぐ
逆の問題も頻繁に発生します。言語の規則に従ってハイフンが受け入れられない場所でハイフンを禁止するためです。 たとえば、測定単位を数値(10 ml)、年の指定(紀元前54年)、イニシャルを名前から分離したり、永続的な略語(など)を壊したりすることはできません。スペースにハイフンを追加します。これは、区切りのないスペースに置き換える必要があります(例5)。
例5.使用法
転送 座標70°58′19″ sの湖。 NS。 97°24′5″ E 村は、ロシアのクラスノヤルスク地方のタイミル・ドルガノ・ネネツ地区にあります。
この例では、座標の正しいスペルのために、テキストを折り返すことができないように使用されています。
こんにちは、みんな)。 どういうわけかレイアウトに役立つcss言語のさまざまな便利なプロパティについて書き続けています。 そして今日は、単語がコンテナに収まらない場合にcssで単語をラップする方法を説明したいと思います。 実際の例ですべてをお見せします。
適合しない単語のハイフネーションをオンにする
幅100ピクセルのブロックがあり、そこにテキストを書き込む必要があるとします。 テキストには「 自己解凍型"。 これは、たとえばアーカイブです)しかし、要点ではありません。 単語は非常に長く、コンテナの幅に収まりません。 こんな狭いブロック(100ピクセル)で書いてみましょう。 何が起こるか?
ご覧のとおり、かわいそうな言葉がコンテナから這い出てきました。まあ、彼には行くところがありません。あなたに何ができるでしょうか。 そして、これはインデントなしです。 したがって、ここでワードラッププロパティが役に立ちます。 ブロックでワードラップを有効にするためにブロックに要求する必要があるものは次のとおりです。
ワードラップ:ブレークワード;
また、説得力を高めるために、パディングを追加することもできます。 したがって、プロパティを適用した後、長すぎる単語は1文字ずつ別の行に折り返されることがわかります。 また、2行目では単語が足りなくても、残りは3行目に転送されます。
物件は安全にご利用いただけます。 まず、今日のブラウザでうまく機能します。 第二に、それはスマートに動作します。 つまり、通常の単語はすべてハイフネーションがなく、単語全体が次の行に転送されるため、読みやすさが損なわれることはありません。 このスクリーンショットでそれを見ることができます。ワードラップを使用する場合
実際、これまでのところ2つのユースケースがあります。 1つ目は狭いブロック用で、長い単語がブロックから醜く這うのではないかと心配しています。 2つ目は、サイトの名前を数行にするように設計者が考えたときです。
したがって、この記事では、cssでワードラップを行う方法を学びました。 今日はこれですべてです。 またね。