هرس یک یا چند خط متن در ارتفاع با اضافه کردن نقاط. سرریز متن در فایرفاکس و همه چیز، همه، همه CSS Troytiech

معرفی CSS3 مستلزم تغییرات انقلابی در روزهای هفته روزانه طراحان وب است. CSS3 هر روز ما را شگفت زده نمی کند. چیزهایی که شما فقط با جاوا اسکریپت انجام می شود، اکنون به راحتی با CSS3 انجام می شود. به عنوان مثال، اموال متن بیش از حد.

گاهی اوقات در هنگام ایجاد سایت ها، ما باید بخشی از متن پویا را بدون تغییر به خط بعدی پنهان کنیم. یعنی، یک متن طولانی را به یک جدول با عرض ثابت وارد کنید. در همان زمان، شما باید کاربر را نشان دهید که بخش قابل مشاهده متن همه نیست. همچنین بخش پنهانی وجود دارد. مشابه با استفاده از سه طرفه (...) نشان داده می شود.

با CSS3، ما به راحتی می توانیم آن را با استفاده از اموال Text-Overflow CSS اجرا کنیم.

نشانه گذاری

سر و صدا متن: Ellipsis؛

مقدار بیضه به شما اجازه می دهد تا Troytiech را اضافه کنید (...)

املاک بیش از حد متن: Ellipsis مفید است زمانی که:

1. متن فراتر از سلول است
2. در سلول فضای آزاد وجود دارد: NowRap.

ما یک DIV با عرض 150 پیکسل برای نمایش نام شرکت ها از پایگاه داده داریم. اما در عین حال ما نمی خواهیم نام های طولانی شرکت ها را به یک خط جدید یاد بگیرند و ظاهر جدول را از بین ببرند. به این ترتیب، ما باید متن را پنهان کنیم که فراتر از مرزهای 150 پیکسل است. ما همچنین می خواهیم کاربر را در مورد آن اطلاع دهیم. به طوری که او به این معنی است که همه نام نمایش داده نمی شود. و ما تمام متن را در هنگام شنا کردن ماوس می خواهیم.

بیایید نگاهی بیاندازیم چون می توانیم آن را با CSS3 انجام دهیم.

شرکت WRAP UL LI (
سر و صدا متن: Ellipsis؛
سرریز: پنهان؛
فضای سفید: NowRap؛ )

پشتیبانی مرورگر

با پشتیبانی از مرورگرها، این ویژگی دارای یک پرستار کوچک است. همه چیز به جز فایرفاکس کاملا به درستی نمایش داده می شود. اما، آنها آواز خواندن، یک راه حل و این مشکل وجود دارد!

Troyaty در فایرفاکس.

متاسفانه، Gecko (موتور خروجی صفحات C) فایرفاکس از این اموال پشتیبانی نمی کند. با این حال، این مرورگر از XBL پشتیبانی می کند، که ما از این وضعیت خارج خواهیم شد.

gecko - این موتور خروجی موتور رایگان (موتور طرح انگلیسی) مرورگرهای موزیلا فایرفاکس، Netscape و دیگران است. نام های قدیمی "رپتور" و "nglayout" هستند. مفهوم اصلی Gecko پشتیبانی از استانداردهای باز اینترنت مانند HTML، CSS، W3C DOM، XML 1.0 و جاوا اسکریپت است. مفهوم دیگر - متقابل پلت فرم. تا به امروز، Gecko در سیستم عامل های لینوکس، Mac OS X، FreeBSD و مایکروسافت ویندوز، و همچنین در Solaris، HP-UX، AIX، IRIX، OS / 2، Openvms، Beos، Amiga و دیگران کار می کند.

برای نمایش سه گانه در فایرفاکس، ما باید یک رشته را به صفحه سبک اضافه کنیم.

اگر می خواهید اموال را غیرفعال کنید، به سادگی اضافه کنید:

Moz-binding: URL ("bindings.xml # none")؛

گام بعدی این است که یک فایل bindings.xml را در همان جایی که ورق سبک ذخیره می شود ایجاد کنید. ما می توانیم از هر ویرایشگر متن برای این استفاده کنیم! کد زیر را کپی کنید و فایل Bindings.xml را بنویسید.

document.getanonymousnodes (این) [0]
this.label.style
این .style.display
اگر (این style.display! \u003d val) this.style.display \u003d val

this.label.value.
اگر (this.label.value! \u003d val) this.label.value \u003d val



var strings \u003d this.TextContent.Split (/ S + / G)
اگر (رشته ها [0]) رشته ها .Shift ()
اگر (! رشته ها [strings.length - 1]) strings.pop ()
this.value \u003d strings.join ("")
this.display \u003d strings.length؟ "": "هیچ یک"


this.update ()


this.update ()

کد نهایی برای همه مرورگرها

شرکت WRAP UL LI (
سر و صدا متن: Ellipsis؛
-O-text-overflow: Ellipsis؛
-Moz-binding: URL ("bindings.xml # ellipsis")؛
فضای سفید: NowRap؛
سرریز: پنهان؛
}

CSS3 به ابزار اصلی طراحی وب در سراسر جهان تبدیل می شود تا سایت های بی سابقه ای را با حداقل کد ایجاد کند. ساده، به معنای واقعی کلمه در یک خط وجود دارد، راه حل هایی که قبلا تنها با فتوشاپ یا جاوا اسکریپت امکان پذیر بود. شروع مطالعه از ویژگی های CSS3 و HTML5 امروز و شما پشیمانی نیست!

برای ایستادن از توده خاکستری مترجمان و تسخیر همدردی های خود، خوانندگان عزیز، در پایان درس های من، افکار و افکار عاقلانه خواهد بود. هر یک از این خطوط چیزی پیدا خواهد کرد :)

انتقال با مزیتی که نمیتوانید تغییر دهید

یک متن از یک طول دلخواه وجود دارد که در داخل ارتفاع ارتفاع و عرض ثابت نمایش داده می شود. در این مورد، اگر متن به طور کامل قرار ندهد، یک قطعه متن باید نمایش داده شود، که به طور کامل در یک بلوک مشخص شده قرار داده می شود، پس از آن نقطه تعیین شده است.

این وظیفه بسیار رایج است، در عین حال به عنوان بی اهمیت نیست، به نظر می رسد.

گزینه ای برای متن تک خط در CSS

در این مورد، شما می توانید از اموال Text-Overflow استفاده کنید: Ellipsis. در این مورد، ظرف باید دارایی باشد. سرریز. برابر پنهان یا کلیپ

بلوک (عرض: 250px؛ فضای سفید: NowRap؛ سرریز: پنهان؛ متن سرریز: Ellipsis؛)

گزینه ای برای متن چند خطی در CSS

اولین راه برای برش متن چند خطی با استفاده از خواص CSS برای اعمال شبه عناصر : قبل از. و : بعد از.. برای شروع نشانه گذاری HTML

Lorem Ipsum Dolor Sit Amet، Consectetuer Adipiscing Elit، Sed Diam Nonumumy Nibh Euismod Tincidunt UT Laoreet Dolore Magna Aliquam Erat Volutpat. UT Wisi ENIM AD MUND MINEM، QUIS NOSTRUD EXTERI TATION ULLAMCREPER SUSCIPIT LOBORTIS NISL UT ALIQUIP EX EA Commodo Commodo. Duis Autem Vel EUM Iriure Dolor Dolor در Hendrerit در Vulttate Velit Esse Molestie Screugat، Vel Illorum Dolore Eu Feugiat Nulla Facilisis در Vero Eros Et Abjsan Et Iusto Odio Dignissim Qui Blandit Praesent Luptatum Zzril Delenit Augue Duis Dolore Te Feugait Nulla Facilisi.

و در حال حاضر خواص خود را

جعبه (سرریز: پنهان؛ ارتفاع: 200px؛ عرض: 300 پیکسل؛ ارتفاع خط: 25 پیکسل؛) .box: قبل از: "شناور: سمت چپ؛ عرض: 5 پیکسل؛ ارتفاع: 200px؛) .box\u003e *: اولین -Child (شناور : راست؛ عرض: 100٪؛ حاشیه چپ: -5px؛) .box: بعد از (محتوای: "\\ 02026"؛ جعبه اندازه: جعبه محتوا؛ شناور: درست؛ موقعیت: نسبی؛ بالا: -25 پیکسل؛ سمت چپ : 100٪؛ عرض: 3EM؛ حاشیه سمت چپ: -3EM؛ PADDING-RIGHT: 5PX؛ TEXT-ALIGN: RIGHT؛ Background-Size: 100٪ 100٪؛ سابقه و هدف: گرادیان خطی (به سمت راست، RGBA (255، 255) ، 255، 0)، سفید 50٪، سفید)؛)

راه دیگری این است که از اموال ستون عرض استفاده کنید که ما عرض ستون را برای متن چند خطی تنظیم می کنیم. درست است، هنگام استفاده از این روش، برای ایجاد پایان ELLISIS. HTML:

Lorem Ipsum Dolor Sit Amet، Consectetuer Adipiscing Elit، Sed Diam Nonumumy Nibh Euismod Tincidunt UT Laoreet Dolore Magna Aliquam Erat Volutpat. UT Wisi ENIM AD MUND MINEM، QUIS NOSTRUD EXTERI TATION ULLAMCREPER SUSCIPIT LOBORTIS NISL UT ALIQUIP EX EA Commodo Commodo. Duis Autem Vel EUM Iriure Dolor Dolor در Hendrerit در Vulttate Velit Esse Molestie Screugat، Vel Illorum Dolore Eu Feugiat Nulla Facilisis در Vero Eros Et Abjsan Et Iusto Odio Dignissim Qui Blandit Praesent Luptatum Zzril Delenit Augue Duis Dolore Te Feugait Nulla Facilisi.

بلوک (سرریز: پنهان؛ ارتفاع: 200px؛ عرض: 300 پیکسل؛) .block__inner (-Webkit-column-width: 150px؛ -moz-column-width: 150px؛ ستون عرض: 150px؛ ارتفاع: 100٪؛)

راه سوم برای حل متن چند خط در CSS برای مرورگرها است WebKit. در آن، ما باید از چندین ویژگی خاص با پیشوند استفاده کنیم -Webkit. اصلی اصلی -Webkit-line-clamp است که به شما اجازه می دهد تعداد رشته های نمایش داده شده در بلوک را مشخص کنید. راه حل زیبا است، اما به دلیل کار آن در یک گروه محدود از مرورگرها محدود است

بلوک (سرریز: پنهان؛ متن پرتو: Ellipsis؛ صفحه نمایش: -Webkit-Box؛ -Webkit-line-Clamp: 2؛ -Webkit-Box-Orient: عمودی؛)

گزینه ای برای متن چند خطی در جاوا اسکریپت

این یک بلوک اضافی نامرئی است که در آن متن ما در ابتدا قرار می گیرد، پس از آن توسط یک شخصیت حذف می شود، تا زمانی که ارتفاع این واحد کمتر یا برابر با ارتفاع بلوک مورد نظر باشد. و در پایان، متن به بلوک منبع منتقل می شود.

var block \u003d سند QuerySelector (".block")، متن \u003d بلوک. Innerhtml، کلون \u003d سند. Createeelement ("DIV")؛ شبیه. سبک. موقعیت \u003d "مطلق"؛ شبیه. سبک. دید \u003d "پنهان"؛ شبیه. سبک. عرض \u003d بلوک ClientWidth + "PX"؛ شبیه. innerhtml \u003d متن؛ سند بدن Appendchild (کلون)؛ var l \u003d متن طول - 1؛ برای (؛ L\u003e \u003d 0 && کلون. ClientHeight\u003e Block. ClientHeight؛ - L) (کلون innerhtml \u003d text substring (0، l) + "..."؛) بلوک. innerhtml \u003d کلون. innerhtml؛

همانند یک پلاگین برای jQuery:

(تابع ($) (var truncate \u003d el. text \u003d el. متن ()، height \u003d el ارتفاع ()، کلون \u003d el. کلون ()؛ کلون CSS ((موقعیت: مطلق "، دید:" مخفی "، ارتفاع:" خودکار "))؛ ال. پس از (کلون)؛ var l \u003d متن طول - 1؛ برای (؛ l\u003e \u003d 0 && کلون. ارتفاع ()\u003e ارتفاع؛ - l) (کلون متن. Substring (0، L) + "...")؛) EL متن (متن کلون ())؛ کلون حذف ()؛)؛ $؛ $ fn. truncatetextext \u003d function () تابع () (truncate ($)؛))؛)؛)؛) (jQuery))؛

با این حال، گاهی اوقات نام های طولانی از لینک های کالاها تحریک می شوند - سه خط یا هدر های طولانی از بلوک های مختلف. چگونه می توان بزرگ خواهد بود اگر به نحوی تمام این کار امکان پذیر بود، جمع آوری کنید. و هنگامی که ماوس را به طور کامل نشان می دهد عنوان را به طور کامل نشان می دهد.

برای این، CSS مورد علاقه ما به نجات خواهد آمد. همه چیز بسیار ساده است، نگاه کنید.

فرض کنید ما چنین بلوک از کاتالوگ با کالاها داریم:

در اینجا ساختار آن است:

معجزه Yudo اضافه وزن Syloper، مرموز، هنر. 20255-59

کالاهای شگفت انگیز در قیمت فوق العاده، فقط 100 روبل. خراش شبانه تنهایی خود را و به یک جزر و مد از زندگی!

در اینجا سبک های اوست:

Somblock (Border: 1px Solid #CCCCCCC؛ حاشیه: 15px خودکار؛ پد: 10 پیکسل؛ عرض: 250 پیکسل؛). هدر (مرزی پایین: 1 پیکسل خطی؛ فونت ؛)

موافقم، به نظر می رسد وحشتناک است. البته، شما می توانید نام کالا را کاهش دهید. اما اگر چنین صدها یا هزاران نفر؟ شما همچنین می توانید از PHP برای برش بخشی از عنوان استفاده کنید، محدود کردن هر تعداد کاراکترها. اما چه باید بکنم اگر طرح تغییر کند و بلوک ها کمتر از یا بر خلاف آن، 2-3 برابر بیشتر باشد؟ این همه گزینه نیست، این همه برای ما مناسب نیست.

و در اینجا ما به نجات و اموال جادویی آن خواهیم رسید سرریز متن. اما باید با استفاده از چندین ویژگی دیگر استفاده شود. در زیر من یک راه حل آماده به شما نشان خواهم داد، بعد از آن من توضیح خواهم داد.

بنابراین، حرکت به سوی ویرایش دستی از نام کالاها و نرم افزار برش سبک ها، ما به دست CSS می رویم و به ما نگاه می کنیم:

معجزه Yudo اضافه وزن Syloper، مرموز، هنر. 20255-59

کالاهای شگفت انگیز در قیمت فوق العاده، فقط 100 روبل. خراش شبانه تنهایی خود را و به یک جزر و مد از زندگی!

خوب، بهتر است؟ من خیلی فکر می کنم! و ماوس را به عنوان ... voila! در اینجا به طور کامل نشان داده شده است.

در ساختار، ما چیزی را تغییر نداد، من فقط یک دیوا با یک کلاس اضافه کردم .سرتیتر. برچسب عنوان و در اینجا سبک های جدید، تکمیل شده هستند:

Somblock (Border: 1px Solid #CCCCCCC؛ حاشیه: 15px خودکار؛ پد: 10 پیکسل؛ عرض: 250 پیکسل؛). هدر (مرزی پایین: 1 پیکسل خطی؛ فونت ؛ سرریز: پنهان؛ متن سرریز: Ellipsis؛ فضای سفید: NowRap؛)

ببینید آنچه ما انجام دادیم:

• ما یک واحد املاک اضافه کردیم. فضای سفید: NowRapکه کلمات را به رشته جدید در متن حذف می کند، در نتیجه آن را به خط می اندازد؛
• سپس اموال را اضافه کردیم سرریز: پنهانکه چشم انداز رشته بلوک ما را محدود کرده است، به این ترتیب همه چیز را بیش از حد برش می دهد و آن را به بازدید کننده نشان می دهد؛
• خوب، در پایان ما Troytiech را به خواص رسانه های ردیف اضافه کردیم سر و صدا متن: Ellipsisبنابراین، دادن بازدید کننده برای درک این که این پایان خط نیست، و آنچه شما نیاز دارید، احتمالا سینک را به ارمغان می آورید و آن را به طور کامل ببینید.

عشق CSS، مطالعه CSS، و ساختمان سایت به نظر نمی رسد به شما چنین چیز سختی \u003d)

ولادی مرزویچ

با وجود این واقعیت که مانیتورهای قطر بزرگ در حال تبدیل شدن به بیشتر در دسترس هستند، و قطعنامه آنها به طور مداوم در حال رشد است، گاهی اوقات وظیفه در یک فضای محدود ایجاد می شود تا اطمینان حاصل شود متن زیادی. به عنوان مثال، ممکن است برای یک نسخه تلفن همراه از سایت یا برای یک رابط مورد نیاز باشد که در آن تعداد ردیف ها مهم است. در چنین مواردی، این امر منطقی است که خطوط طولانی متن را اصلاح کنیم، فقط آغاز حکم را ترک می کنیم. بنابراین ما رابط را به یک فرم جمع و جور ارائه می دهیم و مقدار اطلاعات نمایش داده شده را کاهش می دهیم. برش ردیف ها را می توان بر روی سمت سرور با استفاده از همان پی اچ پی انجام داد، اما از طریق CSS آن ساده تر است، علاوه بر این، شما همیشه می توانید متن را به طور کامل نشان دهید، به عنوان مثال، هنگامی که شما نشانگر ماوس را حرکت می دهید. بعد، روش هایی را در نظر بگیرید که چگونه متن قیچی خیالی را قطع می کند.

در واقع، همه چیز به استفاده از خواص سرریز با ارزش پنهان می رسد. تفاوت ها فقط در نمایش مختلف متن ما لیسیدن هستند.

با استفاده از سرریز

برای اینکه املاک سرریز خود را با متن در تمام شکوه خود نشان دهید، باید انتقال متن را با استفاده از فضای سفید با مقدار NOWRAP لغو کنید. اگر این کار انجام نشود، پس اثر ما نیازی نیست، انتقال در متن اضافه می شود و آن را به طور کامل نمایش داده می شود. به عنوان مثال 1، نشان داده شده است که چگونه متن طولانی را با مجموعه مشخص شده از خواص سبک مشخص کنید.

مثال 1. سرریز برای متن

HTML5 CSS3 IE CR OP SA FX

نتیجه این مثال در شکل نشان داده شده است. یکی

شکل. 1. نوع متن پس از اعمال خواص سرریز

همانطور که از نقاشی دیده می شود، فقدان به طور کلی یکی است - واضح نیست که متن ادامه دارد، بنابراین لازم است که این را به کاربر بدهد. این به طور معمول یک گرادیان یا بیضی را اعمال می کند.

اضافه کردن گرادیان به متن

برای روشن کردن آن روشن است که متن در سمت راست به پایان نمی رسد، در بالای آن شما می توانید یک گرادیان از یک رنگ شفاف به رنگ پس زمینه (شکل 2) اعمال کنید. این اثر انحلال تدریجی متن را ایجاد می کند.

شکل. 2. متن با گرادیان

مثال 2 ایجاد این اثر را نشان می دهد. سبک عنصر خود را عملا باقی می ماند، همان شیب خود را با استفاده از یک عنصر pseudo-lement و CSS3 اضافه خواهد شد. برای انجام این کار، یک شبه خالی خالی را از طریق ویژگی محتوا وارد کنید و از یک گرادیان با پیشوند های مختلف برای مرورگرهای اصلی استفاده کنید (مثال 2). عرض گرادیان آسان است برای تغییر از طریق عرض، شما همچنین می توانید درجه شفافیت را تنظیم کنید، جایگزین مقدار 0.2 خود را.

مثال 2. گرادیان بیش از متن

HTML5 CSS3 IE 8 IE 9+ CR OP SA FX

Arpeggio intradiscree یک پلیمر را تبدیل می کند، این یک عمودی تک مرحله ای در یک بافت پلی فونیک فوق العاده کشاورزی است.

این روش در مرورگر اینترنت اکسپلورر به نسخه 8.0 کار نمی کند، زیرا از شیب پشتیبانی نمی کند. اما شما می توانید CSS3 را رها کنید و از طریق تصویر در فرمت PNG-24، شیب را به شیوه ای قدیمی بسازید.

این روش فقط با یک پس زمینه مونوفونیک ترکیب شده است و در مورد یک تصویر پس زمینه، یک گرادیان بر روی متن به چشم عجله می کند.

نقطه در انتهای متن

به جای یک گرادیان در انتهای متن بریده شده، می توانید از یک نقطه استفاده کنید. علاوه بر این، آن را به صورت خودکار با استفاده از اموال متن عبور اضافه خواهد شد. او تمام مرورگرها را درک می کند، از جمله نسخه های قدیمی تر از IE، و تنها ضرر این اموال هنوز وضعیت مبهم آن است. در CSS3، به نظر می رسد این اموال شامل، اما کد اعتبار ندارد.

به عنوان مثال 3، استفاده از اموال پرطرفدار متن با ارزش ELLISISIS، که یک نقطه را اضافه می کند، نشان داده شده است. هنگامی که مکان نما ماوس را روی متن قرار می دهید، به طور کامل نمایش داده می شود و توسط پس زمینه برجسته می شود.

مثال 3. استفاده از سرریز متن

HTML5 CSS3 IE CR OP SA FX

ناخودآگاه باعث کنتراست می شود، آن را توسط Ross به عنوان یک خطای اساسی از تخصیص، که در بسیاری از آزمایشات کشف شده است، نشان داده شده است.

نتیجه این مثال در شکل نشان داده شده است. 3

شکل. 3. متن با نقطه

به علاوه این روش ها، لحظه ای است که اگر متن کوتاه و به طور کامل در منطقه مشخص شده قرار داده شود، گرادیان و خم شدن نمایش داده نمی شود. بنابراین متن به طور معمول نمایش داده می شود زمانی که آن را به طور کامل بر روی صفحه نمایش قابل مشاهده است و کاهش به کاهش عرض عنصر.