یک جعبه با متن پیمایش با استفاده از CSS و HTML ایجاد کنید
یک جعبه اسکرول HTML جعبه ای است که نوارهای پیمایش را به سمت راست و پایین اضافه می کند زمانی که محتویات جعبه بزرگتر از ابعاد جعبه هستند. به عبارت دیگر، اگر جعبه ای دارید که می تواند حدود 50 کلمه باشد و شما 200 کلمه دارید، یک جعبه اسکرول HTML نوارهای پیمایش را به شما نشان می دهد تا 150 کلمه اضافی را مشاهده کنید. در HTML استاندارد که به سادگی متن اضافی خارج از جعبه را فشار می دهد.
ساخت اسکرول HTML بسیار آسان است. شما فقط باید عرض و ارتفاع عنصری را که میخواهید پیمایش کنید تنظیم کنید و سپس از ویژگی property overflow CSS برای تعیین اینکه چگونه میخواهید پیمایش رخ دهد، استفاده کنید.
چه کاری با متن اضافی انجام دهید؟
هنگامی که متن بیشتری از فضای موجود در طرح خود دارید، چند گزینه دارید:
- متن را بازنویسی کنید تا کوتاه تر شود و متناسب با آن باشد.
- اجازه متن را به فراتر از حد مجاز می دهید و امیدواریم طرح بتواند از آن حمایت کند.
- متن را که در آن سرریز می شود را قطع کنید.
- نوارهای اسکرول را اضافه کنید (معمولا برای متن عمودی است) به طوری که فضای کپی شده برای نشان دادن متن اضافی.
بهترین گزینه معمولا آخرین گزینه است: یک جعبه متن پیمایش ایجاد کنید. سپس متن اضافی هنوز قابل خواندن است، اما طراحی شما به خطر نمی افتد.
HTML و CSS برای این عبارتند:
سرریز: خودکار؛ به مرورگر می گوید برای اضافه کردن نوارهای پیمایش، اگر آنها برای نگه داشتن متن از سرریز کردن مرزهای div، مورد نیاز باشند. اما برای اینکه این کار را بکنید، شما همچنین نیاز به خواص سبک و عرضی در div دارید، به طوری که مرزهایی برای سرریز شدن وجود دارد.
شما همچنین می توانید متن را با تغییر سرریز قطع کنید: auto؛ به سرریز: پنهان؛ اگر از اموال سرریز خارج شوید، متن بیش از مرز div است.
شما می توانید با استفاده از نوارها را به بیش از یک متن اضافه کنید
اگر یک تصویر بزرگ دارید که می خواهید در فضای کوچکتر نمایش داده شود، می توانید نوارهای پیمایش را در اطراف آن به همان شیوه ای که متن را اضافه می کنید اضافه کنید.
در این مثال، تصویر 400x509 در داخل پاراگراف 300x300 قرار دارد.
جداول می توانند از نوارهای رونده بهره مند شوند
جدول های طولانی اطلاعات می توانند خیلی سریع به خواندن بسیار دشوار باشند، اما با قرار دادن آنها در یک div از اندازه محدود و سپس اضافه کردن ویژگی سرریز، شما می توانید جداول با تعداد زیادی از داده ها تولید کنید که فضای شدید را بر روی صفحه خود نداشته باشند .
ساده ترین راه درست مثل تصاویر و متن است، فقط یک div در اطراف جدول اضافه کنید، عرض و ارتفاع آن div را تنظیم کنید و ویژگی سرریز را اضافه کنید:
| 502-5366 یک چیزی که وقتی اتفاق می افتد اتفاق می افتد، یک نوار اسکرول افقی به نظر می رسد، زیرا مرورگر فرض می کند که کروم از نوارهای پیمایش، جدول همپوشانی دارد. راه های زیادی برای رفع آن از تغییر عرض جدول و دیگران وجود دارد. اما مورد علاقه من این است که به راحتی پیمایش افقی را با overflow-x CSS3 خاتمه دهید. فقط overflow-x را اضافه کنید: پنهان به div، و نوار پیمایش افقی را حذف کنید. مطمئن شوید که این را امتحان کنید، زیرا ممکن است محتوایی که ناپدید می شود باشد. فایرفاکس با استفاده از برچسب TBODY برای سرریز پشتیبانی می کندیک ویژگی واقعا عالی مرورگر فایرفاکس این است که شما می توانید از ویژگی سرریز در برچسب های جدول داخلی مثل tbody و thead یا tfoot استفاده کنید. این بدان معنی است که شما می توانید نوارهای پیمایش را روی محتویات جدول تنظیم کنید و سلولهای هدر در بالای آن قرار گیرند. این فقط در فایرفاکس کار می کند، که خیلی بد است، اما اگر خوانندگان شما فقط از فایرفاکس استفاده کنند، یک ویژگی خوب است. مرورگر به این مثال در فایرفاکس مراجعه کنید.
|