بیضی Css در انتهای خط. سرریز متن در فایرفاکس و تمام، همین، همین. کد نهایی برای همه مرورگرها

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

این کار بسیار رایج است، اما در عین حال آنقدرها هم که به نظر می رسد بی اهمیت نیست.

در این حالت می توانید از ویژگی text-overflow: ellipsis استفاده کنید. در این صورت ظرف باید دارای خاصیت باشد سرریزبرابر پنهان شده استیا کلیپ

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

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

Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam، quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat، vel illum dolore eu feugiat nulla facilisis و vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum fazril delenita.

و حالا خود خواص

جعبه (سرریز: پنهان؛ ارتفاع: 200 پیکسل؛ عرض: 300 پیکسل؛ ارتفاع خط: 25 پیکسل؛ ) .باکس: قبل (محتوا: ""؛ شناور: سمت چپ؛ عرض: 5 پیکسل؛ ارتفاع: 200 پیکسل؛ > *:ست. -child ( شناور: راست؛ عرض: 100%؛ حاشیه-چپ: -5 پیکسل؛ ) .box :after ( محتوا: "\02026"؛ اندازه جعبه: محتوای-باکس؛ شناور: سمت راست؛ موقعیت: نسبی؛ بالا: -25px؛ چپ: 100%؛ عرض: 3em؛ حاشیه-چپ: -3em؛ بالشتک-راست: 5px؛ تراز نوشتاری: راست؛ اندازه پس‌زمینه: 100% 100%؛ پس‌زمینه: گرادیان خطی (به راست، rgba) (255 , 255 , 255 , 0 ), سفید 50% , سفید ) )

راه دیگر استفاده از ویژگی column-width است که با آن عرض ستون را برای متن چند خطی تعیین می کنیم. اما هنگام استفاده از این روش امکان تنظیم بیضی در انتها وجود نخواهد داشت. HTML:

Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam، quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat، vel illum dolore eu feugiat nulla facilisis و vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum fazril delenita.

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

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

بلوک (سرریز: پنهان؛ متن-سرریز: بیضی؛ نمایش: -webkit-box؛ -webkit-line-clamp: 2؛ -webkit-box-orient: عمودی؛)

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

var block = سند. querySelector(".block")، text = block. innerHTML، کلون = سند. createElement("div"); شبیه سبک. موقعیت = "مطلق" ; شبیه سبک. visibility = "پنهان" ; شبیه سبک. عرض = بلوک . clientWidth + "px" ; شبیه innerHTML = متن ; سند بدن appendChild(clone); var l = متن . طول - 1؛ برای (; l >= 0 && clone . clientHeight > block . clientHeight ; -- l ) (clone . innerHTML = text . substring (0 , l ) + "..." ; ) block . innerHTML = کلون innerHTML ;

این همان افزونه برای jQuery است:

(تابع ($) ( var truncate = تابع (el ) ( var text = el. text ()، height = el. height ()، clone = el. clone (); clone . css (( موقعیت : "مطلق" , قابلیت مشاهده: "پنهان"، ارتفاع: "خودکار")؛ el. پس از (کلون)، var l = متن. طول - 1؛ برای (; l >= 0 && clone. height () > height; -- l) ( clone . text ( text . substring (0, l ) + "..."); ) el. text (clone. text ()); clone. remove (); $. fn. truncateText = function () (این را برگردانید. هر (تابع () ( کوتاه کردن ($ (this )); )); )(jQuery ));

احتمالاً بسیاری از افراد زمانی با این مشکل مواجه شده اند که برخی از متن ها باید در یک خط نمایش داده شوند. علاوه بر این، متن می تواند بسیار طولانی باشد و عرض بلوکی که این متن در آن قرار دارد معمولاً حداقل به همان اندازه پنجره مرورگر محدود می شود. برای این موارد، ویژگی text-overflow اختراع شد که در توصیه CSS3 گنجانده شد و برای اولین بار در IE6، خیلی وقت پیش، پیاده سازی شد. هنگام استفاده از این ویژگی برای یک بلوک، اگر متن آن از خود بلوک گسترده تر باشد، متن قطع شده و یک بیضی در انتهای آن قرار می گیرد. اگرچه همه چیز در اینجا چندان ساده نیست، ما کمی بعد به این موضوع باز خواهیم گشت.
در اینترنت اکسپلورر همه چیز واضح است، در مورد سایر مرورگرها چطور؟ به نام -o-overflow-text).اما فایرفاکس این کار را نمی کند، از آن پشتیبانی نمی کند و حتی در نسخه 3 هم پشتیبانی نمی کند. ناراحت کننده است، اما درست است. اما شاید بتوان کاری انجام داد؟

البته قابل انجام است. وقتی در اینترنت در مورد این ویژگی و نحوه انجام آن در فایرفاکس جستجو کردم، به یک راه حل ساده برخورد کردم. اصل راه حل:

همین. برای جزئیات بیشتر مقاله را بخوانید.
راه حل بد نیست، اما مشکلاتی وجود دارد:

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

در حال حاضر، بیایید به آنچه انجام داده ایم نگاه کنیم. ابتدا ارتفاع و ارتفاع بلوک اصلی را تنظیم می کنیم، زیرا باید ارتفاع بلوک و ارتفاع خط متن را بدانیم. ما همان مقدار را برای حاشیه بالای بلوک با بیضی تنظیم می کنیم، اما با مقدار منفی. بنابراین، هنگامی که بلوک به خط بعدی "ریست" نمی شود، بالای خط متن (یک خط) قرار می گیرد، زمانی که تنظیم مجدد شود، در سطح خود خواهد بود (در واقع، پایین تر است، فقط آن را می کشیم. یک ردیف). برای پنهان کردن چیزهای غیر ضروری، به خصوص زمانی که نیازی به نشان دادن بیضی نیست، ما سرریز را ایجاد می کنیم: مخفی برای بلوک اصلی، بنابراین وقتی بیضی بالای خط باشد، نشان داده نمی شود. این همچنین به ما امکان می دهد متنی را که خارج از بلوک (در لبه سمت راست) قرار دارد حذف کنیم. برای جلوگیری از پیچیده شدن غیرمنتظره متن و فشار دادن بلوک با بیضی پایین و پایین تر، فضای سفید ایجاد می کنیم: nowrap، در نتیجه خط تیره را ممنوع می کنیم - متن ما همیشه در یک خط خواهد بود. برای بلوک دارای متن، float: left را تنظیم می کنیم تا بلافاصله بلوک را با بیضی جمع نکند و حداقل عرض را بگیرد. از آنجایی که در داخل بلوک اصلی (DIV.ellipsis) هر دو بلوک شناور هستند (شناور: چپ/راست)، وقتی بلوک متن خالی باشد، بلوک اصلی جمع می‌شود، بنابراین برای بلوک اصلی یک ارتفاع ثابت (ارتفاع: 1.2em) تعیین می‌کنیم. . و در آخر از شبه عنصر ::after برای نمایش بیضی استفاده می کنیم. برای این شبه عنصر ما همچنین یک پس زمینه برای پوشاندن متنی که در زیر آن ظاهر می شود تنظیم می کنیم. یک قاب برای بلوک اصلی تنظیم می کنیم تا ابعاد بلوک را ببینیم، بعداً آن را حذف می کنیم.
اگر فایرفاکس از عناصر شبه و همچنین اپرا و سافاری از نظر موقعیت یابی (تنظیم موقعیت / شناور و غیره برای آنها) پشتیبانی می کرد، در این صورت می توان از بلوک جداگانه برای بیضی ها استفاده نکرد. سعی کنید 3 قانون آخر را با موارد زیر جایگزین کنید:

همانطور که متوجه شده اید، ما از مشکل ظاهر شدن بیضی ها در زمانی که متن در یک بلوک قرار می گیرد خلاص شدیم. با این حال، ما هنوز یک مشکل دیگر داریم - متن در وسط حروف قطع شده است. و علاوه بر این، در IE کار نمی کند. برای غلبه بر هر دو، باید از قانون اصلی متن سرریز برای مرورگرها استفاده کنید و فقط برای فایرفاکس از راه حلی که در بالا توضیح داده شد استفاده کنید (جایگزینی وجود ندارد). ما بعداً نحوه ایجاد یک راه حل "فقط برای فایرفاکس" را متوجه خواهیم شد، اما اکنون بیایید سعی کنیم آنچه را که داریم با استفاده از متن سرریز کار کنیم. بیایید CSS را تغییر دهیم:

هنگامی که یک بار دیگر به صفحه (قبل از نوشتن این مقاله) که در همان ابتدا ذکر شد نگاه کردم، سپس به دلیل کنجکاوی، نظرات را برای ایده های هوشمندانه جستجو کردم. و من آن را در یک نظر یافتم که در مورد راه حل دیگری صحبت می کرد که در فایرفاکس و اینترنت اکسپلورر کار می کند (برای این شخص، همانطور که برای نویسنده مقاله اول، ظاهراً مرورگر دیگری وجود ندارد). بنابراین، در این راه حل، نویسنده با این پدیده (عدم وجود متن-سرریز) به شیوه ای متفاوت برخورد می کند و کنترل کننده هایی را به رویدادهای سرریز و زیر جریان به عناصری متصل می کند که در صورت لزوم لازم بود برای آنها بیضی قرار داده شود. بد نیست، اما به نظر من این راه حل بسیار گران است (از نظر منابع)، به خصوص که تا حدودی مشکل دارد. با این حال، در حین فهمیدن اینکه چگونه به این هدف دست یافته است، با یک چیز جالب روبرو شد، یعنی ویژگی CSS -moz-binding. تا جایی که من متوجه شدم، این یک آنالوگ رفتار در IE است، فقط با یک سس و خنک کننده متفاوت. اما ما وارد جزئیات نمی‌شویم، فقط بگوییم که به این ترتیب می‌توانید یک کنترلر جاوا اسکریپت را با استفاده از CSS به یک عنصر متصل کنید. عجیب به نظر می رسد، اما کار می کند. ما چه کار می کنیم:

می‌توانیم به این نقطه پایان دهیم، اما می‌خواهیم راه‌حل خود را کمی بهتر کنیم. از آنجایی که می‌توانیم یک سازنده را به هر بلوکی متصل کنیم و بر این اساس، کنترل آن را به دست آوریم، چرا از این مزیت استفاده نکنیم. بیایید ساختار خود را ساده کنیم:

من یک مثال کوچک برای طرح‌بندی شخص ثالث به شما می‌زنم. فهرست مطالب یکی از صفحات ویکی‌پدیا (اولین صفحه‌ای که بالا آمد) را گرفتم و روشی را که در بالا توضیح داده شد روی آن اعمال کردم.
به طور کلی، این راه حل را می توان تنها با کشش جهانی نامید. همه چیز به چیدمان و پیچیدگی آن بستگی دارد. ممکن است به یک فایل یا شاید هم یک تنبور نیاز داشته باشید. اگرچه در بیشتر موارد، من فکر می کنم که کار خواهد کرد. و سپس، شما اکنون یک نقطه شروع دارید ;)
امیدوارم چیز جالب و مفیدی از مقاله یاد گرفته باشید؛) یاد بگیرید، آزمایش کنید، به اشتراک بگذارید.
موفق باشید!

ولاد مرژویچ

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

در واقع، همه چیز به استفاده از ویژگی سرریز با مقدار پنهان برمی‌گردد. تفاوت ها فقط در نمایش متفاوت متن ما نهفته است.

برای اینکه ویژگی overflow با تمام شکوه خود را با متن نشان دهد، باید متن را با استفاده از فاصله سفید با مقدار nowrap باز کنید. اگر این کار انجام نشود، افکت مورد نیاز ما رخ نمی دهد؛ خط فاصله به متن اضافه می شود و کل متن نمایش داده می شود. مثال 1 نحوه برش متن طولانی را با مجموعه مشخصی از ویژگی های سبک نشان می دهد.

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

HTML5 CSS3 IE Cr Op Sa Fx

اندازه متن ( فضای سفید: nowrap؛ /* لغو بسته بندی متن */ سرریز: پنهان؛ /* برش محتوا */ پس زمینه: #fc0؛ /* رنگ پس‌زمینه */ پد: 5 پیکسل؛ /* حاشیه‌ها */ )

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

برنج. 1. ظاهر متن پس از اعمال ویژگی overflow

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

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

برنج. 2. متن گرادیان

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

مثال 2: گرادیان بر متن

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Text .size ( فضای سفید: nowrap؛ /* لغو بسته بندی متن */ سرریز: پنهان؛ /* محتوای برش */ padding: 5px؛ /* حاشیه */ پس زمینه: #fc0؛ /* رنگ پس زمینه */ موقعیت: نسبی ; /* موقعیت نسبی */ ) .size::after ( محتوا: ""؛ /* خروجی عنصر */ موقعیت: مطلق؛ /* موقعیت مطلق */ راست: 0؛ بالا: 0؛ /* موقعیت عنصر */ عرض: 40 پیکسل؛ /* عرض گرادیان*/ ارتفاع: 100%؛ /* ارتفاع والد */ /* گرادیان */ پس‌زمینه: -moz-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%)؛ پس‌زمینه: -webkit-linear-gradient(چپ، rgba(255,204،0، 0.2)، #fc0 100%)؛ پس‌زمینه: -o-linear-gradient(سمت چپ، rgba(255،204،0، 0.2)، #fc0 100%)؛ پس‌زمینه: -ms-linear-gradient(چپ، rgba(255,204,0، 0.2)، #fc0 100%)؛ پس‌زمینه: خطی-gradient (به راست، rgba(255,204,0, 0.2)، #fc0 100 %)))

یک آرپژ درون گسسته یک پلی سری را تغییر می دهد؛ این یک عمودی یک بار در یک پارچه فوق العاده پلی فونیک است.

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

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

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

مثال 3 استفاده از ویژگی text-overflow را با مقدار بیضی نشان می دهد که یک بیضی اضافه می کند. هنگامی که ماوس خود را روی متن قرار می دهید، به طور کامل نمایش داده می شود و با رنگ پس زمینه برجسته می شود.

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

HTML5 CSS3 IE Cr Op Sa Fx

اندازه متن ( فضای سفید: nowrap؛ /* لغو بسته بندی متن */ سرریز: پنهان؛ /* محتوای برش */ بالشتک: 5 پیکسل؛ /* حاشیه ها */ متن-سرریز: بیضی؛ /* بیضی */ ) اندازه :hover ( پس‌زمینه: #f0f0f0؛ /* رنگ پس‌زمینه */ فضای سفید: عادی؛ /* بسته‌بندی متن معمولی */ ) ناخودآگاه باعث کنتراست می‌شود، این توسط لی راس به عنوان یک خطای انتساب اساسی شناسایی می‌شود که می‌توان آن را در آزمایش های زیادی

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

برنج. 3. متن با بیضی

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

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

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

با CSS3 می توانیم به راحتی این کار را با استفاده از ویژگی CSS text-overflow انجام دهیم

علامت گذاری

سرریز متن: بیضی;

معنی بیضیبه شما امکان می دهد یک بیضی بعد از متن اضافه کنید (...)

ویژگی text-overflow: ellipsis زمانی مفید است که:

1. متن فراتر از سلول گسترش می یابد
2. فضای خالی در سلول وجود دارد: nowrap.

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

بیایید به نحوه انجام این کار با استفاده از CSS3 نگاهی بیندازیم.

Company-wrap ul li (
متن سرریز: بیضی;
سرریز: پنهان;
white-space:nowrap; )

• نام شرکت


• مدیریت دارایی سرمایه گذاری


• سرمایه گذاری راسل


• شبکه مالی متقابل شمال غربی


• شبکه های مالی ING

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

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

سه نقطه در فایرفاکس

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

Gecko یک موتور طراحی صفحه وب رایگان برای موزیلا فایرفاکس، نت اسکیپ و سایر مرورگرها است. نام های قدیمی "Raptor" و "NGLayout" هستند. مفهوم اصلی Gecko پشتیبانی از استانداردهای وب باز مانند HTML، CSS، W3C DOM، XML 1.0 و جاوا اسکریپت است. مفهوم دیگر کراس پلتفرم است. امروزه Gecko بر روی سیستم عامل های Linux، Mac OS X، FreeBSD و Microsoft Windows و همچنین Solaris، HP-UX، AIX، Irix، OS/2، OpenVMS، BeOS، Amiga و غیره اجرا می شود.

برای نمایش بیضی در فایرفاکس باید یک خط به استایل شیت اضافه کنیم.

اگر می خواهید ویژگی را غیرفعال کنید، فقط اضافه کنید:

Moz-binding: url("bindings.xml#none");

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

document.getAnonymousNodes(this)[ 0 ]
این.برچسب.سبک
این.سبک.نمایش
if(this.style.display != val) this.style.display= val

این.برچسب.ارزش
if(this.label.value != val) this.label.value= val



var strings= 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 ? "" : "هیچ یک"


this.update()


this.update()

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

Company-wrap ul li (
متن سرریز: بیضی;
-o-text-overflow: بیضی;
-moz-binding: url("bindings.xml#ellipsis");
فضای سفید: nowrap;
سرریز: پنهان;
}

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

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

آنچه را که نمی توانید تغییر دهید با وقار تحمل کنید.

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

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

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

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

معجزه شب یودو قدرت بخش، مرموز، هنر. 20255-59

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

در اینجا استایل های او آمده است:

Someblock(حاشیه: 1 پیکسل یکپارچه #cccccc؛ حاشیه: 15 پیکسل خودکار؛ بالشتک: 10 پیکسل؛ عرض: 250 پیکسل؛ ) . سرصفحه( حاشیه-پایین: 1 پیکسل نقطه چین؛ اندازه قلم: 16 پیکسل؛ وزن قلم: پررنگ؛ حاشیه-پایین: 12 پیکسل ;)

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

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

بنابراین، با کنار گذاشتن ویرایش دستی نام محصولات و برش برنامه‌ای استایل‌ها، CSS را در دست می‌گیریم و می‌بینیم چه چیزی به دست می‌آوریم:

معجزه شب یودو قدرت بخش، مرموز، هنر. 20255-59

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

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

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

Someblock(حاشیه: 1px یکپارچه #cccccc؛ حاشیه: 15px خودکار؛ بالشتک: 10px؛ عرض: 250px؛ ) .header( حاشیه-پایین: 1px خط چین؛ اندازه قلم: 16px؛ وزن قلم: پررنگ؛ حاشیه-پایین: 12p ؛ سرریز: پنهان؛ سرریز متن: بیضی؛ فضای سفید: nowrap؛ )

ببین چیکار کردیم:

• ما ویژگی "nowrap" را به بلوک اضافه کردیم، که توانایی متن را برای قرار دادن کلمات در یک خط جدید حذف می کند و در نتیجه آن را به یک خط کشیده می کند.
• سپس سرریز را اضافه کردیم: خاصیت پنهان، که دید خط ما را به عرض بلوک محدود می‌کرد، در نتیجه تمام موارد اضافی را قطع می‌کرد و به بازدیدکننده نشان نمی‌داد.
• خوب، در پایان با استفاده از ویژگی text-overflow: ellipsis یک بیضی به خط خود اضافه کردیم، به این ترتیب به بازدیدکننده اجازه می‌دهیم بداند که این پایان خط نیست و احتمالاً باید موس خود را حرکت داده و به آن نگاه کند. پر شده.

CSS را دوست داشته باشید، CSS را یاد بگیرید و ساخت وب سایت برای شما چندان دشوار به نظر نمی رسد =)