kіntsiのCssbagatokrapka。 追加の斑点がある高さに応じた1つ以上の複数行のテキストの抜粋。 権限テキスト-オーバーフロー：省略記号corisna coli
dovgіをからかう1時間のように、仲間のメッセージに名前を付けます-3行、または他のブロックの他の見出し。 それは素晴らしいでしょう、ヤクビーはそれをよりコンパクトにするかのように、右端までブロにすることができます。 そして、クマと一緒にホバリングするときは、もう一度タイトルを表示します。
私たちが助けを必要としている人のために、私たちのお気に入りのCSSが来てください。 すべてがシンプルで驚異的です。
たとえば、商品のカタログを含む次のようなブロックがあります。
アクシスヨガの構造：
100ルーブル未満の超価格で素晴らしい商品。 わがままな夜を明るくして、活力を与えましょう！
アクシスヨガスタイル：
Someblock（border：1px solid #cccccc; margin：15px auto; padding：10px; width：250px;）.header（border-bottom：1px dashed; font-size：16px; font-weight：bold; margin-bottom：; ）
貪欲に見えて、ちょっと待ってください。 さて、私はすぐに製品に名前を付けることができます。 しかし、そのような数百、数千のように働くことはどうですか？ phpを使用して名前の一部を切り取り、多くの記号が豊富になっていることもできます。 しかし、後でレイアウトが変更され、ブロックが小さくなるように、または同時に2〜3倍大きくなるように、作業についてはどうでしょうか。 すべてが選択肢ではなく、すべてが適切ではありません。
そしてここで私たちはCSSの助けを借りてヨガの魅力の力になります テキストオーバーフロー。 エールヨガは、他の当局とのデキルコムから一度に正しく勝つ必要があります。 以下に、完成したソリューションを示します。その後、何が何をするのかを説明します。
その後、商品名を手作業で編集し、プログラムでスタイルをカットした後、 cssの手そして私たちが私たちに何を見ているのか疑問に思います：
Miracle Yudo silovidavetsvechirnіy、taєmnichy、art。 20255-59
100ルーブル未満の超価格で素晴らしい商品。 わがままな夜を明るくして、活力を与えましょう！
ヤク、短い？ Duzhenavist！ そして、クマをその名前に持ってきてください...出来上がり！ 軸はますます私たちに示されています。
構造に変更はありません。クラスを追加しただけです。 。ヘッダタイトルタグ。 そして、軸は新しい、追加のスタイルです：
Someblock（border：1px solid #cccccc; margin：15px auto; padding：10px; width：250px;）.header（border-bottom：1px dashed; font-size：16px; font-weight：bold; margin-bottom：overflow ：非表示;テキストオーバーフロー：省略記号;空白：nowrap;
私たちが殺したものに驚嘆してください：
- 私たちはブロックに力を与えました 空白：nowrap、同じトークンvytyagyuchiїхによって、テキストで単語を新しい行に転送する可能性を拾うかのように;
- それから私たちは力を与えられました オーバーフロー：非表示これは、行の可視性をブロックの幅で囲み、すべてをそれ自体で形作り、表示しませんでした。
- ええと、例えば、私たちは追加の力のために私たちの列にトリコットを追加しました テキストオーバーフロー：省略記号、同じように、あなたが列を終わらせないという事実、そしておそらくあなたのフォークを持ち上げてあなたに驚嘆することが必要であるという事実への洞察をあなたに与えます。
CSSが大好きで、CSSを学びましょう。そうすれば、このような折り畳み式のフレーズでWebサイトを構築することはできません=）
テキストを1行に並べる必要がある場合は、問題に固執する金持ちの誰か。 この場合、同じサイズのブラウザウィンドウが必要な場合は、テキストをさらに長くすることができ、テキストを見つけることができるブロックの幅がサウンドで囲まれます。 一方、テキストオーバーフロー機能は、CSS3の推奨事項に含まれていたために発明され、以前はIE6で実装されていました。 ブロックのパワーを選択するときに、下のブロック自体の幅に対してテキストが大きい場合、テキストが形成され、最後にスポットが配置されます。 ここではすべてがそれほど単純ではありませんが、今年の大群に目を向けましょう。
Internet Explorerで、誰もが理解しました、他のブラウザはどうですか？ したい 現在の瞬間 CSS3仕様は、テキストオーバーフローを無効にし、Safariヨガを有効にし（第3バージョンで採用）、Opera tech（第9バージョン以降、パワーは-o-overflow-textと呼ばれます）。 そしてFirefox-nі、pіdrimuєではなく、私は3番目のバージョンではナビゲートされません。 合計、しかし事実。 エール、多分、あなたはscroobitiできますか？
Zrobiti、zvіsno、できます。 インターネットでパワーのドライブを検索した場合、Firefoxのcimはどのようになっているのでしょうか？ 決定を許す。 ソリューションの本質：
私から。 詳細については、記事をお読みください。
解決策は悪くありませんが、問題があります。
- テキストは文字の真ん中（精神的に見える）でカットでき、多かれ少なかれ「切り株」になります。
- テキストがブロックの幅よりも小さい場合は、リッチモットリングが常に表示されます（したがって、テキストが新しいブロックから消えることはなく、モットリングは必要ありません）。
クロックスファースト
穂軸については、他の問題に焦点を当てていますが、必要のないときに斑点を取り除く方法は私たち自身です。 頭を骨折して「トローチ」を実験したので、あなたは決定への答えを知っています。 説明しようと思います。
肝心なのは、テキストの幅が大きすぎる場合に1回だけ表示される、3つの斑点のあるokremyブロックが必要なことです。 それから私はフローティングブロックについてのアイデアを思いつきました。 怖いように聞こえたいのですが、ここでは、zavzhdiであるブロックのmaєtsyaを右利きで押しましたが、テキストの幅が大きくなると、攻撃的な行のテキストvishtovhuєブロックになります。
練習に移りましょう。さもなければ、説明することが重要です。 HTML構造を設定しましょう：
非常に長いテキスト
コンパクトでもありませんが、小さいものはありませんでした。 また、ブロックコンテナDIV.ellipsisがある場合があります。テキストを含むブロックは、1つのブロックをドラッグします。これは、バゲットに値します。 敬意を表して、テキストをコピーすれば、3つのドットを入力する必要がなくても、「3つのドットのあるブロック」は実際には空です。 また、追加のクラスが存在する場合はvarto lyakatisyaではありません。構造が与えられているという事実は、ヘルプのために十分に対処されています。 CSSセレクター。 そしてi軸はCSS自体です：
.ellipsis（オーバーフロー：非表示;空白：nowrap;行の高さ：1.2em;高さ：1.2em;境界線：1px黒一色;）.ellipsis> DIV：first-child（float：left;）.ellipsis> DIV + DIV（float：right; margin-top：-1.2em;）。
私から。 Firefox、Opera、Safariが意図したとおりに機能することを確認して再検討します。 IEは素晴らしい結果をもたらしましたが、結果はやり過ぎです。 IE6ではすべてがうまくいきませんでしたが、IE7では、生成されたコンテンツをサポートしていないため、機能しません。 エールからIEへ、振り返ります。
とりあえず、理解するのはもっと難しいです。 まず、メインブロックの行の高さと高さを設定するので、ブロックの高さとテキスト行の高さを知る必要があります。 値は、3つのドットが付いたマージントップブロックに設定され、負の値も設定されます。 この順序で、ブロックが次の行で「スロー」されていない場合、テキストの順序が大きくなり（1行で）、スローされた場合、それはїї等しい（実際には、ワインは低く、一列に並べる方が簡単です）。 zaveを取り付けるために、特にスペックを表示する必要がない場合は、オーバーフローする可能性があります。メインブロックに対して非表示になっているため、スペックが線よりも高い場合は表示されません。 Tseを使用すると、整理することができます。ブロック（右端）とテキストの間にあります。 転送せずにテキストを転送できないように、また、上下に3つのスペックルがあり、mimoの空白があるブロックをvishtovhuvaveしないようにします。nowrap、自分で転送します。テキストは1行になります。 テキストのあるブロックには、float：leftを設定したので、ブロックに斑点で3回名前を付けず、最小幅を使用しました。 メインブロックの中央にあるシャード（DIV.ellipsis）と2つのブロックがフローティング（フロート：左/右）の場合、メインブロックは折りたたまれます。テキストブロックが空の場合、メインブロックに固定の高さが設定されます。 （高さ：1.2em）。 さて、やめて、斑点を発酵させるためのバイコリストの疑似要素::後。 この疑似要素の場合、背景を設定して、残りのテキストを上書きすることもできます。 メインブロックのフレームを設定しました。ブロックの寸法を改善するためだけに、それは私たちにとってより良いことです。
Firefoxのように、OperaіSafari、shdoїхpositioning（zavdannyaїмposition / floatなど）のような親切なpіdtrimuvav疑似要素と同様に、省略記号に大きなブロックを使用することができます。 攻撃に関する3つのルールの残りを置き換えてみてください。
.ellipsis> DIV：first-child :: after（float：right; content： "..."; margin-top：-1.2em; background-color：white; position：relative;）
OperaとSafariでは、すべてが以前と同じように機能し、3つの斑点がある追加のブロックはありません。 そしてFirefoxの軸は轟音を立てています。 新しいmirobimoソリューションについても同じです。 さて、あなたは穂軸のHTML構造でうまくいくことができます。
クロックスその他
覚えていると思いますが、テキストがブロックに収まると問題が発生し、斑点が発生しました。 ただし、もう1つ問題があります。テキストは、文字の中央に形成されます。 それまでは、IEは機能しません。 これらをさらに修正するには、ブラウザのテキストオーバーフロールールを微調整する必要があります。Firefoxのみが説明されているソリューションを微調整します（代替手段はありません）。 「Firefox専用」のソリューションを解決する方法は後で分析しますが、同時に、テキストオーバーフローではないソリューションを解決しようとします。 CSSを修正：
.ellipsis（オーバーフロー：非表示;空白：nowrap;行の高さ：1.2em;高さ：1.2em;境界線：1px赤一色; テキストオーバーフロー：省略記号; -o-text-overflow：省略記号; 幅：100％ } .ellipsis *（表示：インライン;）/ *.ellipsis> DIV：first-child（float：left;）.ellipsis> DIV + DIV（float：right; margin-top：-1.2em;）.ellipsis> DIV + DIV :: after（background-color：white;コンテンツ： "..."; ） */
結局のところ、ルールは豊富ではありません。 メインブロックのスタイルには3つの行があります。 それらのうちの2つには、テキストのオーバーフローが含まれます。 幅幅の設定：IEでは100％が必要です。これにより、テキストがブロックを限界まで拡張せず、テキストオーバーフローの力が適用されます。 Vlasne、幅を狭めました。 DIVのアイデアによると、すべてのブロック要素と同様に、それらはコンテナの幅全体に広がり、幅：100％は最大ではなく、ナビゲートすることはできませんが、IEにはレイアウトの問題がありますがコンテナは常にコンテンツのサイズを超えて拡張する必要があります。そうしないと、拡張できません。 また、すべての内部要素をインライン（インライン）にしたため、一部のブラウザー（SafariおよびOpera）では、中央にブロック要素があるため、テキストオーバーフローが機能しません。 残りの3つのルールをコメントアウトしたので、 この特定のタイプに悪臭は必要なく、すべてが壊れています（競合）。 これらのルールはFirefoxに必要です。
私たちの中で何が起こって、何が起こったのか疑問に思いましょう。
3番目のKrok
初めて横をちらっと見た場合（その前に、この記事を書き込もうとしていたとき）、非常に穂軸を見てから、興味を引くために、次のテーマに関するコメントをちらっと見ました。合理的な賢いアイデア。 コメントでは、FirefoxやIEのような別のソリューションに関するものだったと思います（これらの人々にとっては、最初の記事の著者や他のブラウザーのように、そうではないかもしれません）。 したがって、軸は、私の意見では、この現象（テキストのオーバーフローを含む）、細分化のオーバーフローおよびアンダーフロー要素に関するnavisuyuchi oprobnikiと戦う必要があります。そのため、必要に応じてトリプルをスペックルに配置する必要がありました。 悪くはありませんが、（リソース計画で）道を解決する方が良いです。それ以上に、新しいことにとっては良いことです。 しかし、実際のところ、rozbirayuchisは蝉のこと、そしてCSS-moz-bindingのまさにその力に出くわしました。 私が理解していることですが、これはIEの動作に類似していますが、ソースとクーラーが異なります。 詳細には触れませんが、この方法で要素zのJavaScriptサンプルを改善できるとだけ言っておきましょう。 CSSを支援する。 素晴らしいサウンド、エールtsepracyuє。 私たちは何をしますか：
.ellipsis（オーバーフロー：非表示;空白：nowrap;行の高さ：1.2em;高さ：1.2em;境界線：1px赤一色;テキストオーバーフロー：省略記号; -o-text-overflow：省略記号;幅：100％ ; -moz-binding：url（moz_fix.xml＃ellipsis）; ズーム：1;）.ellipsis *（表示：インライン;） .moz-省略記号>DIV：first-child（フロート：左; 表示ブロック; } .moz-省略記号>DIV+ DIV（フロート：右;マージントップ：-1.2em; 表示ブロック; } .moz-省略記号>DIV+ DIV :: after（背景色：白;内容： "...";）
ご覧のとおり、もう一度小さな変更を加えました。 IE7のこの段階では、すばらしいグリッチが発生し、すべてが歪んでいるため、メインブロックにズーム：1を設定しません（最も簡単なオプション）。 Yakshchoはルールを整理します（vidaliti、コメントアウト）。 省略記号*または。 moz-省略記号>DIV+ DIV（IE7が機能しないように）、グリッチがあります。 すべてが素晴らしいです、誰かが右側の理由を知っているなら、私に知らせてください。 今のところ、ズーム：1で、Firefoxに移りましょう。
Power -moz-bindingには、省略記号識別子を含む命令を含むmoz_fix.xmlファイルが含まれています。 Vmist tsgogo xmlファイルフィート：
セレクターを作成した要素に至るまで、このコンストラクターで機能するすべてのものに、moz-ellipsisクラスを追加します。 Firefox（geckoブラウザー？）でのみ機能するため、要素にmoz-ellipsisクラスのみが与えられ、ルールを追加できます。 あなたは何をした。 安全にプレイしたほうがいいのですが、this.style.mozBinding = ""は必要ないと思います（Firefoxの側面についてよく知らないので、それを憐れんでください）。
このダウンロードでは、現在のJavaScriptファイルを探している可能性があります。 Lykatisyaはvartoではありません。 まず第一に、ファイルは処理されないか、JavaScriptは含まれません、それは大丈夫です、それは大したことではありません、テキストはブロックが完了した後に表示されます。 したがって、この場合、「邪魔にならない」ソリューションを採用できます。 あなたは自分自身を変えることができます。
このようにして、Opera、Safari、IEのテキストオーバーフローを実装する「GreatFour」ブラウザのスタイルを取り除いた。Firefoxの場合、それは少なくはないが、何もないよりも短い。
廃人の四分の一
どの場所にスポットを置くことができますか、またはソリューションを少し改善したいと思います。 コンストラクターを任意のブロックに配置するにはどうすればよいでしょうか。将来的には、コンストラクターを制御できるようになります。cimを高速化してみませんか。 構造を単純化しましょう。
非常に長いテキスト
ああそう！ 私はあなたが私を待つことができると思います-あなたが必要とするすべて！
それでは、すべてをスタイリッシュにしましょう。
.ellipsis（オーバーフロー：非表示;空白：nowrap;行の高さ：1.2em;高さ：1.2em;テキストオーバーフロー：省略記号; -o-テキストオーバーフロー：省略記号;幅：100％; -moz-binding： url（moz_fix.xml＃ellipsis）;）.moz-ellipsis> DIV：first-child（float：left;）.moz-ellipsis> DIV + DIV（float：right; margin-top：-1.2em;）-ellipsis > DIV + DIV :: after（background-color：white; content： "...";）
ミナレシュティは赤い枠を片付けました:)
そして、moz_fix.xmlにもう少し追加します。
ここで何が起こっているのですか？ HTMLのcob構造を再発明しました。 自動的にブロックrobyatsyaで折りたたむと、Firefoxよりも少なくなります。 JavaScriptコード最高の伝統で書く:)
それは残念です、状況、テキストが手紙の真ん中に形成されている場合、私たちは隠すことができません（それは本当です、それは可能です、Timchasovo、それが私の決定がまだ良い理由です、そして将来私たちはそれを見ることができます） 。 しかし、効果を少し滑らかにすることができます。 画像（透明なグラデーションのあるボディよりも優れている）と、スタイルの3つの変更が必要です。
.moz-省略記号>DIV：最初の子（フロート：左; マージン右：-26px;）.moz-省略記号> DIV + DIV（float：right; margin-top：-1.2em; 背景：url（ellipsis.png）repeat-y; パディング-左：26px; }
私たちは人生に驚嘆し、喜びます。
その上に斑点を置きます。
ヴィスノヴォク
サードパーティのレイアウト用に小さなお尻を持ってきます。 ウィキペディアのページの1つ（最初のページが表示された）を変更し、zasosuvを別の方法で新しい説明に変更しました。
Vzagali 与えられた決定ストレッチでのみユニバーサルと呼ぶことができます。 すべてはあなたのレイアウトとїї折りたたみに当てはまります。 飲み物、または横痃が必要な場合があります。 もっと良いものが欲しいので、それはいい考えだと思います。 そして、あなたは今有効なポイントを持っています;）
私は推測します、あなたはこれらの統計をcicaveとcoryneから学びました;）読んで、実験して、共有してください。
成功！
CSS3の使用は、Webデザイナーの日常生活における革命的な変化です。 CSS3は、今日私たちを驚かせることをやめません。 以前はJavaScriptを使用すれば実行できなかった単語が、CSS3で簡単に操作できるようになりました。 たとえば、Text-Overflowの力。
サイトを作成する過程で、次の行に切り替えずに動的テキストの一部をキャプチャする必要がある場合があります。 固定幅でテーブルに新しいテキストを挿入します。 同じ時間に、テキストの一部が表示されていることをkoristuvachevに示す必要があります-すべてではありません。 別の作品が付けられています。 三脚を使って似たようなものを見せることができます（...）。
vicoristを使用してCSS3を簡単に編集できます CSSの力テキストオーバーフロー
Rozmіtka
テキストオーバーフロー：省略記号;
価値 省略記号テキストにトリクラプカを追加させます（...）
パワーテキスト-オーバーフロー：省略記号corisna次の場合：
1.真ん中を超えるテキスト
2.真ん中に大きなスペースがあります：nowrap。
データベース会社の名前を表示するための幅150ピクセルのdivがあります。 エール、私たちが一緒にしたくないので、会社の古い名前は新しい列にジャンプし、psuali 古い外観テーブル。 したがって、150ピクセルを超えるテキストを一致させる必要があります。 また、koristuvachにtseについて伝えたいと思います。 uvaziのsobvіnmav、schoすべての名前が表示されるわけではありません。 クマにカーソルを合わせると、テキスト全体が表示されます。
CSS3でどのように助けを得ることができるか見てみましょう。
Company-wrap ul li（
テキストオーバーフロー：省略記号;
オーバーフロー：非表示;
空白：nowrap; ）。
- 会社名
- Envestnet Asset Management
- ラッセルインベストメント
- ノースウェスタンミューチュアルファイナンシャルネットワーク
- ING Financial Networks
ブラウザのサポート
ブラウザのサポート環境で 与えられた力є1つの小さなニュアンス。 すべて、krim firefoxは、奇跡的に正しいです。 エール、幸運のために、єvirishennyatsієї問題！
FirefoxのTrikrapka
残念ながら、geckoFirefoxはこの機能をサポートしていません。 ただし、ブラウザはXBLをサポートしているため、この状況から抜け出すことができます。
ヤモリ-Webページを表示するためのメインエンジン（英語のレイアウトエンジン） Mozillaブラウザ Firefox、Netscapeなど。 古い名前-「Raptor」と「NGLayout」。 Geckoのコアコンセプトは、HTML、CSS、W3C DOM、XML 1.0、JavaScriptなどのインターネット標準に触発されています。 もう1つの概念はクロスプラットフォームです。 今日Geckoは取り組んでいます オペレーティングシステム Linux、Mac OS X、FreeBSDおよび マイクロソフトウィンドウズ、およびSolaris、HP-UX、AIX、Irix、OS / 2、OpenVMS、BeOS、Amigaなど。
Firefoxで3色をレンダリングするには、スタイルシートに1行を追加する必要があります。
電源をオンにしたい場合は、次を追加するだけです。
moz-binding：url（ "bindings.xml＃none"）;
次のステップは、スタイルシートが保存されているスペースにbindings.xmlファイルを作成することです。 私たちはそれでvikoristovuvatiすることができます テキストエディタ誰のため！ 以下のコードをコピーして、ファイルにbindings.xmlという名前を付けます。
varstrings = this.textContent.split（/ \ s + / g）
if（！strings [0]）strings.shift（）
if（！strings [strings.length --1]）strings.pop（）
this.value = strings.join（ ""）
this.display =strings.length？ "" ： "なし"
すべてのブラウザの残りのコード
Company-wrap ul li（
テキストオーバーフロー：省略記号;
-o-text-overflow：省略記号;
-moz-binding：url（ "bindings.xml＃ellipsis"）;
空白：nowrap;
オーバーフロー：非表示;
}
CSS3は、最小限のコードで以前は機能しなかったサイトを作成するための、世界中のWebデザイナーの最高のツールになりつつあります。 以前はPhotoshopまたはjavascriptしか使用できなかった場合、それは単純で、文字通りソリューションの1行にあります。 今日CSS3とHTML5の可能性をチェックしてください。だまされることはありません！
翻訳者の灰色の塊から見られ、あなたの同情を勝ち取るために、私のレッスンのように、壮大な読者は賢明な考えと格言があります。 これらの行のKozhenは彼自身を知っています:)
変えられないものを良さで続けてください。
ブロック内のテキストの可視性パラメータを設定して、テキストが指定された領域に配置されないようにします。 2つのオプションが可能です。テキストが形成されます。 テキストが形成され、行の最後に斑点が追加されます。 オーバーフロー値ボックスが自動、スクロール、または非表示に設定されているため、テキストオーバーフローはそのように機能します。
短い情報
予定
×
説明 お尻 <тип> 値のタイプを指定します。 <размер> A && B 値は指定された順序で表示される場合があります。 <размер> && <цвет> A | B 提案（AまたはB）から1つの値のみを選択する必要があることを示してください。 通常| 小さな帽子 A || B 肌の意味は、独立して、または他の人と一緒に十分な順序で征服することができます。 幅|| カウント 値のグループ。 [作物|| クロス] * 0回以上繰り返します。 [,<время>]* + 1回以上繰り返します。 <число>+ ? 割り当てタイプ、単語chiグループはobov'yazkovimではありません。 はめ込み？ （A、B） A回以上B回以下を繰り返します。 <радиус>{1,4} # 誰を通して1回以上繰り返します。 <время># 価値
クリップテキストは、領域のサイズの後に形成されます。 省略記号テキストが形成され、行の最後に斑点が追加されます。
お尻
テキストオーバーフロー 磁場は、離心率と病気の軌道が成長するときに、天球の大円を消すには不十分です。
イチジクの証言のこのお尻の結果。 1。
米。 1.短いテキストのBagatokrapka
オブジェクトモデル
物体.style.textOverflow
ノート
バージョン11より前のOperaには、-o-text-overflowの機能があります。
仕様
冬眠の段階を通過する皮膚の特異性。
×
- 推奨事項（推奨事項）-仕様はW3Cによって賞賛されており、標準として推奨されています。
- 候補者の推薦（ 考えられる推奨事項）-標準に準拠しているグループは、目標をサポートしているかのように満足していますが、標準を実装するには小売業者からの追加の支援が必要です。
- 提案された推奨事項（ プロモートされた推奨）-その段階で、文書は残留凝固のためにW3Cアドバイザリに提出されます。
- ワーキングドラフト（ワーキングドラフト）-見栄えを良くするための修正について話し合った後の青写真のより大きな成熟したバージョン。
- 編集者の下書き（ エディトリアルブラッキー）は、編集者がプロジェクトに変更を加えた後の標準のドラフトバージョンです。
- 下書き （ Chernivetsの仕様）は、標準の最初の黒バージョンです。
