تگ Html برای قرار دادن در یک خط جدید. نحوه قرار دادن متن در یک سلول در اکسل

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

ویژگی word-wrap

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

بررسی شکستن کلمات

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

اولین خاصیتی که برای پردازش متن باید به آن توجه کرد word-wrap است. این سه مقدار را می گیرد: نرمال، شکستن همه و حفظ همه. شما فقط باید به یاد داشته باشید که همه چیز را شکست دهید تا کار کنید. Normal پیش فرض است و هیچ فایده ای برای تعیین آن ندارد. Keep-all به معنی جلوگیری از شکست خط در یک سند CSS است. به طور خاص برای شخصیت های چینی، ژاپنی و کره ای طراحی شده است. بنابراین اگر قصد ندارید به هیچ یک از آن زبان ها وبلاگ بنویسید، به این ویژگی نیاز نخواهید داشت. همچنین توسط مرورگر سافاری و تلفن های همراه iOS پشتیبانی نمی شود.

برای اختصاص دادن یک خط جدید برای هر حرف به لوگوی مثال قبلی با استفاده از CSS، باید کد زیر را بنویسید:

P( فونت: پررنگ 30 پیکسل Helvetica، sans-serif؛ عرض: 25 پیکسل؛ word-wrap: break-all؛ )

اندازه و عرض فونت به گونه ای انتخاب شده است که فضای کافی برای تنها یک حرف وجود داشته باشد. Word-wrap با مقدار break-all به مرورگر می گوید که هر بار کلمه را در یک خط جدید بپیچد. این خاصیت را نمی توان غیر قابل تعویض نامید. اما هنگام طراحی بلوک های کوچک با متن، مانند فیلدهای نظر، مفید خواهد بود.

ویژگی فضای سفید

یک اشتباه رایج که توسعه دهندگان وب مبتدی مرتکب می شوند این است که سعی می کنند متن را با فاصله ویرایش کنند یا کلید Enter را فشار می دهند و سپس متعجب می شوند که چرا تلاش های آنها در صفحه نمایش داده نمی شود. مهم نیست که چند بار "Enter" را فشار دهید، مرورگر آن را نادیده می گیرد. اما راهی وجود دارد که می‌توانید متن را آنطور که می‌خواهید نمایش دهید و تمام فاصله‌ها را در نظر بگیرید.

در یک سند CSS، شکسته‌های خط، که با ویژگی فضای سفید اختصاص داده شده‌اند، می‌توانند به گونه‌ای پیکربندی شوند که به فاصله‌ها احترام بگذارند یا کلید Enter را فشار دهند. فضای سفید با مقدار pre-line باعث می شود مرورگر Enter را در متن مشاهده کند.

بررسی شکستن کلمات

اگر در کد CSS خود، pre-line را به pre-wrap تغییر دهید، بسته بندی خط شامل فاصله هایی خواهد بود. برعکس، با تنظیم ویژگی فضای سفید روی متن با مقدار nowrap، هر نوع بسته بندی را غیرفعال کنید:

#wrapper p( رنگ: #FFF؛ بالشتک: 10px؛ فونت: پررنگ 16px Helvetica، sans-serif؛ فضای سفید: nowrap؛ )

سرریز متن

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

  • کلیپ - فقط متن را کلیپ می کند.
  • بیضی - بیضی اضافه می کند.
#wrapper p( رنگ: #FFF؛ بالشتک: 10 پیکسل؛ فونت: پررنگ 16 پیکسل Helvetica، sans-serif؛ متن سرریز: بیضی؛/*افزودن بیضی*/ فضای سفید: nowrap؛ /* غیرفعال کردن بسته بندی خط */ سرریز : پنهان؛/*همه چیز را خارج از ظرف پنهان کنید*/ )

برای اینکه ویژگی کار کند، عنصر نیز باید برای جلوگیری از شکست خط و سرریز با مقدار hidden تنظیم شود.

اطلاعات مختصر

نسخه های CSS

css 1 CSS 2 CSS 2.1 CSS 3

شرح

ویژگی white-space نحوه نمایش فاصله بین کلمات را تنظیم می کند. در شرایط عادی، هر تعداد فاصله در کد HTML به صورت یک در یک صفحه وب نشان داده می شود. استثناء برچسب است

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

نحو

فضای سفید: معمولی | nowrap | پیش | پیش خط | پیش بسته بندی | به ارث می برند

ارزش های

عادی متن در پنجره مرورگر به طور معمول نمایش داده می شود، خطوط شکسته به طور خودکار تنظیم می شوند. nowrap فضاها نادیده گرفته می شوند، خطوط شکسته در کد HTML نادیده گرفته می شوند، تمام متن در یک خط نمایش داده می شود. با این حال، اضافه کردن برچسب
متن را روی یک خط جدید قرار می دهد. قبل از متن نشان داده شده است شامل تمام فاصله ها و خط تیره همانطور که توسط توسعه دهنده در کد HTML اضافه شده است. اگر خط بیش از حد طولانی باشد که در پنجره مرورگر قرار نگیرد، یک نوار اسکرول افقی اضافه می شود. فاصله های پیش خط در متن در نظر گرفته نمی شود، اگر متن در قسمت مشخص شده قرار نگیرد، به طور خودکار به خط بعدی پیچیده می شود. pre-wrap تمام فاصله ها و خط تیره ها در متن حفظ می شود، اما اگر عرض خط با ناحیه مشخص شده مطابقت نداشته باشد، متن به طور خودکار به خط بعدی بسته می شود. inherit ارزش والد را به ارث می برد.

تأثیر مقادیر بر متن در جدول ارائه شده است. یکی

HTML5 CSS2.1 IE Cr Op Sa Fx

فضای سفید

مثال

آخرین قضیه فرما
ایکس n+Y n= ز n
که در آن n یک عدد صحیح > 2 است

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

برنج. 1. اعمال ویژگی فضای سفید

مدل شی

document.getElementById("elementID").style.whiteSpace

مرورگرها

اینترنت اکسپلورر تا و شامل نسخه 7.0 از مقادیر pre-line، pre-wrap و inherit پشتیبانی نمی کند. برای