10 آوریل 2016
سلام). من به نوشتن در مورد خواص مفید مختلف زبان css ادامه می دهم، که به یک روش می تواند به طرح بندی کمک کند. و امروز می‌خواهم به شما بگویم که چگونه کلمات را در css بپیچید اگر در ظرف خود قرار نگیرند. من همه چیز را با یک مثال واقعی به شما نشان خواهم داد.
خط فاصله را برای کلماتی که مناسب نیستند فعال کنید
فرض کنید من یک بلوک با عرض 100 پیکسل دارم و باید متنی در آن بنویسم. یک کلمه در متن وجود دارد "خود استخراج". این آرشیو است، برای مثال) اما موضوع این نیست. کلمه بسیار طولانی است، فقط از نظر عرض در ظرف نمی گنجد. بیایید آن را در یک بلوک باریک (100 پیکسل) بنویسیم. چه اتفاقی خواهد افتاد؟
همونطور که میبینی بیچاره از ظرف بیرون خزیده، خب جایی نداره، چیکار میکنی. و این بدون تورفتگی است. بنابراین، در اینجا خاصیت word-wrap به کمک می آید. در اینجا چیزی است که برای تنظیم بلوک برای فعال کردن بسته بندی کلمه در آن نیاز دارید:
Word-wrap: break-word;
و برای اقناع، می توانید تورفتگی های داخلی (padding) را نیز تجویز کنید. بنابراین، پس از اعمال ویژگی، می بینیم که کلمات بسیار طولانی به خط دیگری املا می شوند. علاوه بر این، حتی اگر خط دوم برای یک کلمه کافی نباشد، بقیه آن به سوم منتقل می شود و غیره.
می خواهم توجه داشته باشم که این ملک بدون ترس قابل استفاده است. اول اینکه امروزه در مرورگرها به خوبی کار می کند. دوم اینکه هوشمندانه کار می کند. یعنی برای همه کلمات عادی هیچ خط فاصله وجود نخواهد داشت، کل کلمات به خط بعدی منتقل می شوند، بنابراین خوانایی نقض نمی شود. می توانید آن را در این اسکرین شات ببینید. 
زمان استفاده از word-wrap
در واقع، در حالی که من 2 گزینه برای استفاده می بینم. اولین مورد فقط برای بلوک های باریک است، جایی که می ترسید کلمات طولانی به زشتی از مرزهای بلوک خارج شوند. دوم زمانی است که طراح تصور کرده است که نام سایت در چندین خط باشد.
بنابراین، در این مقاله، ما یاد گرفتیم که چگونه کلمه Wrapping را در css انجام دهیم. این تمام چیزی است که امروز دارم. به امید دیدار.
درس 5
در این درس ما:
1. یاد بگیرید که چگونه کد html را برای ما راحت تر و خواناتر کنید.
2. بیایید بفهمیم که چگونه یک خط متن را به درستی بسته بندی کنیم.
ساخت کد html کاربر پسند.
اکنون کد ما واضح است و به راحتی قابل خواندن است، زیرا متن کمی دارد و تقریباً هیچ برچسبی ندارد. وقتی صفحه پیچیده تری ایجاد می کنیم، تگ های زیادی وجود خواهد داشت، بنابراین یافتن صفحه مناسب دشوار خواهد بود.
برای جلوگیری از آشفتگی برچسب ها، ابتدا باید برچسب ها و خطوط را طوری مرتب کنید که درک بصری آنها آسان تر باشد. وقتی مرورگر اطلاعات را از صفحه html می خواند، فرقی نمی کند که چند فاصله و چند خط خالی در کد وجود دارد.
متن کد صفحه را نسبت به کدی که ایجاد کردیم تغییر دادم، اما مهم نیست. شکل چپ و راست یک کد را نشان می دهد. هر دو گزینه توسط مرورگر بر روی صفحه مانیتور دقیقاً به یک شکل نمایش داده می شوند. موافقم، کار با کد نشان داده شده در سمت راست بسیار ساده تر از کد سمت چپ خواهد بود.
کد مورد نظر ما بسیار ساده است، اما در حال حاضر نیز تفاوت در درک بصری محسوس است. هیچ قانون خاصی برای "بازگرداندن نظم" وجود ندارد، هر استاد خودش تصمیم می گیرد که چگونه کار کردن برای او راحت تر است.
html شکست خط. تگ <br>.
به نقاشی توجه کنید. در نوع اول متن در یک خط و در نوع دوم در دو خط نوشته شده است.
مرورگر هر دو گزینه را به یک شکل نمایش می دهد. متن در یک خط نوشته می شود:
چه می خواهی؟ در واقع، در یکی از کدها، بخشی از متن به خط دیگری منتقل می شود. منطقی است اگر در مرورگر بخشی از متن به خط دیگری نیز منتقل شود، اما html در این زمینه منطق خاص خود را دارد. اگر یک خط در کد html انجام دهیم، برای مرورگر این معادل یک فاصله است(مانند یک فاصله معمولی بین کلمات در متن). اگر بخشی از متن را نه یک خط به پایین، بلکه 2 یا 3 (هر عددی) منتقل کنیم، باز هم مرورگر این فاصله را به عنوان یک فاصله معمولی بین کلمات در نظر می گیرد و وقتی روی صفحه نمایش داده می شود، متن در یک خط نوشته می شود. .
برچسب <br>
وقتی در درس سوم با برچسب ها آشنا شدیم، اشاره کردم که تگ هایی هستند که نیازی به بستن ندارند. برچسب بزنید <br>یکی از آنها، برای شکستن خط است.
بیایید آن را در کد اعمال کنیم:
تگ کرده ایم <br>به کد html ما وارد می شود و اکنون وقتی فایل از طریق مرورگر راه اندازی می شود، بخشی از متن به خط بعدی منتقل می شود.
* فراموش نکنید که تغییرات را در Notepad (Ctrl + S) ذخیره کنید و صفحه را در مرورگر (F5) رفرش کنید.
هنگام چیدمان، وب مسترها به طور دوره ای یک سوال دارند: متن چگونه بسته بندی می شود؟ در بیشتر موارد، مرورگر این کار را به تنهایی انجام می دهد. اما گاهی باید این فرآیند را تحت کنترل گرفت، به خصوص در هنگام شکل دادن به کلمات و عبارات طولانی که اگر به اشتباه منتقل شوند، معنای خود را از دست می دهند.
ویژگی 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؛ بالشتک: 10 پیکسل؛ فونت: پررنگ 16 پیکسل Helvetica، sans-serif؛ فضای سفید: nowrap؛ )
سرریز متن
یکی دیگر از ابزارهای مفید برای کار با متن، سرریز متن است. علاوه بر بسته بندی خط، ویژگی CSS اجازه می دهد تا زمانی که ظرف پر است، محتوا را برش دهید. دو مقدار می گیرد:
- کلیپ - فقط متن را کلیپ می کند.
- بیضی - بیضی اضافه می کند.
#wrapper p( رنگ: #FFF؛ بالشتک: 10 پیکسل؛ فونت: پررنگ 16 پیکسل Helvetica، sans-serif؛ متن سرریز: بیضی؛/*افزودن بیضی*/ فضای سفید: nowrap؛ /* غیرفعال کردن بسته بندی خط */ سرریز : پنهان؛/*همه چیز را خارج از ظرف پنهان کنید*/ )
برای اینکه ویژگی کار کند، عنصر نیز باید برای جلوگیری از شکست خط و سرریز با مقدار hidden تنظیم شود.
اغلب نیاز به اضافه کردن یک پاراگراف جدید وجود دارد، اما بدون خط خالی که تگ پاراگراف درج می کند
برای برخی از قطعات متن، فواصل استاندارد اتخاذ شده برای پاراگراف ها به سادگی نامناسب هستند. اینها می توانند کتیبه های زیر تصاویر و در جداول، اشعار، نقل قول ها، پاورقی ها و یادداشت ها باشند.
برای بسته بندی خط اجباری، یک برچسب ویژه ارائه شده است که عملکرد آن در نام آن br تعبیه شده است (ردیف شکستن - "شکستن یک ردیف، خط"). برچسب بزنید
زبان نشانه گذاری فرامتن html به این معنی است که تمام محتوای زیر باید از یک خط جدید شروع شود. در صورت لزوم می توانید چندین تگ را پشت سر هم قرار دهید تا به فاصله دلخواه برسید.
برچسب بزنید
به حروف کوچک و بزرگ حساس نیست و به تگ بسته شدن نیاز ندارد زیرا یک عنصر خالی است، اما بهتر است به بستن همه تگ ها عادت کنید. در XHTML، تگ break باید با یک بک اسلش "به خوبی بسته شود".
مثال شکستن برچسب
تگ br در عمل< /title></p><p><р>پیاده روی در سرویس</р></p><p><p>هیچ جای دیگر و هرگز <br></p><p>من آنقدر بد نبودم <br></p><p>سران گروه حریص <br></p><p>منو زنده می جویدن</р></p><p>پیاده روی در سرویس</p><p>هیچ جای دیگر و هرگز <br>من آنقدر بد نبودم <br>سران گروه حریص <br>من را زنده زنده می خورد</p><h2>ویژگی برچسب <br></h2><p>تنها ویژگی که تگ html دارد <br>، نامیده می شود و به مرورگر می گوید که اگر متن نیاز دارد در اطراف یک عنصر به اصطلاح شناور بپیچد، مانند تصویری با ویژگی align با استفاده از مقادیر راست/چپ، یا بلوکی در CSS که دارای یک دارایی شناور</p><p>در مشخصات XHTML 1.0 / HTML 4.01، ویژگی clear فقط با Transitional، Frameset و<!DOCTYPE>، در غیر این صورت کد کار نمی کند.</p><h2>ویژگی های ویژگی را تگ کنید</h2><p>تأثیر اعمال صفت clear به مقدار آن و محل عنصر شناور بستگی دارد. ویژگی می تواند 4 مقدار داشته باشد:</p><p><br clear = "right | left | all | none"></p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/21147/458111.jpg' width="100%" loading=lazy loading=lazy></p><p>مقدار سمت چپ مانع از بسته بندی عنصر تراز چپ می شود، بنابراین متن روی برچسب "تلو تلو می خورد" <br>، در زیر تصویر یا سایر عناصر شناور قرار می گیرد.</p><p>دقیقاً همان نتیجه را با استفاده از آرگومان all بدست می آوریم که هرگز به راست یا چپ اجازه نمی دهد.</p><p>مقدار مناسب مانع از پیچیدن متن در اطراف یک عنصر راست چین می شود، بنابراین بعد از تگ <br>متن چاره ای نخواهد داشت جز اینکه تصویر را دور بزند و در اطراف آن به سمت راست جریان یابد.</p><p>مقدار هیچ ("نه شما و نه مال ما") تمام اختیارات را به طور کلی از ویژگی واضح و برچسب حذف می کند. <br>بی صدا خط را به پایین می پیچد.</p><p>هیچ مقدار پیش فرضی برای صفت clear تگ وجود ندارد.</p><h2>برچسب بزنید <br>انتقال نرم است</h2><p>برچسب شکست خط برای ایجاد فاصله لازم بین پاراگراف ها بسیار مفید است، که در آن به عنوان یک شکست نرم استفاده می شود، اما نه به عنوان وسیله ای برای تقسیم متن به پاراگراف ها.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/21147/458084.jpg' width="100%" loading=lazy loading=lazy></p><p>برای قالب بندی متن نباید خیلی از تگ خط جدید غافل شوید، زیرا نتایج همیشه زیبا نیستند.</p><p>به عنوان مثال، اگر از تگ استفاده می کنید <br>برای ترجمه خطوط داخل یک پاراگراف، اگر کوچکتر از پنجره ای باشد که مدیر وب سایت هدف قرار داده است، یک "شانه" در پنجره کاربر ظاهر شود.</p>
<p>سلام به همه و بیایید شروع کنیم. فرض کنید متن زیر را داریم:</p><p> <p>دولت و دولت امارات متحده عربی تمام آخرین فناوری ها را بر اساس آخرین دستاوردهای علم و فناوری در این شهر متمرکز کرده و سعی می کند شهر آینده خود را بچرخاند، گویی از صفحه یک فیلم علمی تخیلی فرود آمده است. این فناوری ها شامل ربات های پلیس، ماشین های روباتی و سیستم حمل و نقل هایپرلوپ می شود و در آینده نزدیک سرویس تاکسی پرنده خودکار در دبی آغاز به کار خواهد کرد. و در تدارک این رویداد، هواپیمای برقی دو سرنشینه Volocopter با 18 روتور که به عنوان تاکسی استفاده می شود، اولین پرواز خود را در حالت اتوماتیک انجام داد.</p> </p><p>در اینجا متنی داریم که اکنون با آن شروع به کار می کنیم.</p>
<p>و اولین خاصیتی که در نظر خواهیم گرفت کلمه شکستن نام دارد</p>
<p>شکستن کلمه: عادی | نگه داشتن همه | شکستن همه</p>
<p>ما عمدتاً به دو مقدار این ویژگی معمولی علاقه مند هستیم - مقدار پیش فرض و شکست همه که با آن تنظیم می کنیم که بسته بندی کلمه کاراکتر به کاراکتر انجام می شود. در مورد keep-all، این مقدار برای قرار دادن کلمات به زبان های چینی، ژاپنی و کره ای استفاده می شود.</p><p>P( شکستن کلمه: شکستن همه؛.)</p><p>توجه داشته باشید که پس از اعمال این سبک، تمام متن ما به عرض کامل در دسترس کشیده می شود و خط فاصله نه با کلمات، بلکه توسط کاراکترها انجام می شود. این ویژگی زمانی می تواند مفید باشد که یک کلمه بسیار طولانی داشته باشیم که در عرض داده شده نمی گنجد. با این حال، این یک نوع ناراحتی ایجاد می کند، زیرا مطلقاً همه کلمات شخصیت به کاراکتر منتقل می شوند، حتی آنهایی که در عرض معینی قرار می گیرند.</p>
<p>خوشبختانه، ویژگی مشابهی وجود دارد که فقط کلمات نامناسب را کاراکتر به کاراکتر می‌پیچد. به آن overflow-wrap می گویند:</p><p>P (سرریز-پوشش: شکستن کلمه؛)</p><p>و پس از اعمال مقدار break-word، تمام متن ما کلمه به کلمه پیچیده می شود و کلماتی که در عرض مشخص شده نمی گنجند، کاراکتر به کاراکتر پیچیده می شوند. می توان گفت ماموریت انجام شد! این ویژگی علاوه بر مقدار break-word، موارد زیر را نیز می پذیرد:</p>
<p>overflow-wrap: معمولی | شکستن کلمه | به ارث می برند؛</p>
<p>حالا بیایید به یک ویژگی css پیشرفته تر برای قرار دادن کلمات در متن برویم.</p>
<p>ویژگی فضای سفید را در نظر بگیرید که با آن می‌توانیم کار تگ پیش را بدون تغییر متن به monospace تقلید کنیم.</p>
<p>فضای سفید: معمولی | nowrap | پیش | پیش خط | پیش بسته بندی | به ارث می برند</p>
<p>در واقع با استفاده از این خاصیت فقط با فاصله های متن کار می کنیم. به عنوان مثال، اگر سبک زیر را به متن خود اعمال کنیم:</p><p>فضای خالی: nowrap;</p><p>تمام خطوط شکست نادیده گرفته می شود و متن ما به صورت یک خط نمایش داده می شود.</p><p>فضای سفید: pre;</p><p>در مورد مقدار پیش، تمام شکست های خط مانند شکست های خط در کد منبع خواهد بود. علاوه بر این، اگر متن در عرض مشخص شده قرار نگیرد، انتقال داده نخواهد شد. اگر بخواهیم wrap شود، باید یک مقدار pre-line را مشخص کنیم.</p>
<p>اگر بخواهیم نه تنها شکستگی خطوط در کد منبع، بلکه فاصله بین کلمات را نیز در نظر بگیریم، باید مشخص کنیم:</p><p>فضای سفید: پیش بسته بندی</p><p>این اساساً تمام چیزی است که می‌خواستم در مورد بسته بندی کلمات با استفاده از css به شما بگویم. امیدوارم این مقاله برای شما مفید بوده باشد و از دانش به دست آمده بیش از یک بار استفاده کنید.</p>
<p>خوب من با شما خداحافظی می کنم. برای شما آرزوی موفقیت و موفقیت دارم! خدا حافظ!</p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</div>
<div class="post-social-counters-block">
<div style="margin-top: 12px">
<noindex></noindex>
</div>
</div>
</div>
</div>
<a name="comments"></a>
<h3 class="best-theme-posts-title">برترین مقالات مرتبط</h3>
<div class="container-fluid">
<div class="best-theme-posts row">
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/fa/v-kontakte-dobro-pozhalovat-0-vkontakte-moya-stranica-vhod-na.html">
<div class="img_container"><img src="/uploads/2b167d692715137c3ce02b4c3c1380ca.jpg" border="0" alt="صفحه من VKontakte (ورودی به صفحه VK)" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">صفحه من VKontakte (ورودی به صفحه VK)</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/fa/smm-prodvizhenie-v-socialnyh-setyah-prodvizhenie-v-socialnoi.html">
<div class="img_container"><img src="/uploads/19da2b2a3bad96baa4845402986107f5.jpg" border="0" alt="تبلیغ در یک شبکه اجتماعی: نحوه تبلیغ یک گروه VKontakte ارتقاء یک گروه در شبکه های اجتماعی" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">تبلیغ در یک شبکه اجتماعی: نحوه تبلیغ یک گروه VKontakte ارتقاء یک گروه در شبکه های اجتماعی</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/fa/mail-nacionalnaya-voiti-v-moi-mir-voiti-na-moyu-stranicu-v-moi-mir.html">
<div class="img_container"><img src="/uploads/8c4dfa4a4a682db0bce546e8b330786f.jpg" border="0" alt="ملی مایل. وارد دنیای من شو وارد صفحه من در دنیای من شوید" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">ملی مایل. وارد دنیای من شو وارد صفحه من در دنیای من شوید</span>
</a>
</div>
</div>
</div>
</div>
<a name="comments"></a>
</div>
<div class="right-column col-sm-4 col-md-4">
<div class="write">
<span class="tags-title">دسته بندی ها:</span>
<ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags">
<li class=""><a href="https://bumotors.ru/fa/category/programs/">برنامه ها</a></li>
<li class=""><a href="https://bumotors.ru/fa/category/safety/">امنیت</a></li>
<li class=""><a href="https://bumotors.ru/fa/category/windows-10/">ویندوز 10</a></li>
<li class=""><a href="https://bumotors.ru/fa/category/iron/">اهن</a></li>
<li class=""><a href="https://bumotors.ru/fa/category/windows-8/">ویندوز 8</a></li>
<li class=""><a href="https://bumotors.ru/fa/category/vkontakte/">در تماس با</a></li>
<li class=""><a href="https://bumotors.ru/fa/category/errors/">اشتباهات</a></li>
</ul>
</div>
<div class="banner">
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="footer">
<div class="subscribe">
<div class="main-wrapper container">
<div class="row">
<div class="col-sm-8">
</div>
<div class="col-sm-4">
<div class="social">
<a href="" class="vk social-ico"></a>
<a href="https://facebook.com/" class="fb social-ico"></a>
<a href="https://twitter.com/" class="tw social-ico"></a>
</div>
</div>
</div>
</div>
</div>
<div class="info">
<div class="main-wrapper container">
<div class="row">
<span class="footer-info col-xs-12">© 2022 bumotors.ru. نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی. پرتال اطلاعاتی</span>
</div>
</div>
</div>
</div>
</body>
</html> 