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

24.04.2019 جالب هست

متن CSS3شامل ویژگی های متن برای کمک به حل مشکلات مربوط به بسته بندی متن و برش متن در محتوا است.

ویژگی های CSS3 برای قالب بندی متن

1. برش خط متن سرریز

این ویژگی به شما امکان می دهد طول متن را زمانی که در ظرف قرار نمی گیرد محدود کنید، به صورت بصری آن را قطع کنید یا با بیضی نمایش دهید. این ویژگی فقط در صورتی کار می کند که شرایط زیر مشخص شده باشد: عرض ظرف باید تعریف شود، عنصر باید مقادیر Overflow را داشته باشد: hidden و white-space: nowrap. ارثی نیست.

نحو

P (عرض: 300 پیکسل؛ سرریز: پنهان؛ فضای سفید: nowrap؛ سرریز متن: بیضی؛ ) شکل. 1. متن را با استفاده از ویژگی text-overflow برش دهید

2. خط فاصله در کلمات شکستن کلمه

در یک موقعیت عادی، کلمات به خط دیگری منتقل می شوند که در آن فاصله یا خط فاصله وجود دارد (" انتقال نرم")، یا در مورد انتقال اجباری با استفاده از عنصر
. این ملکبه شما این امکان را می دهد که قوانین خط خطی را در کلمات تنظیم کنید تا خطوط طولانی فضای داخل ظرف را کاملاً پر کند. برای زبان های CJK (چینی-ژاپنی-کره ای) استفاده نمی شود. به ارث برده.

نحو

P (شکست کلمه: عادی؛) p (شکست کلمه: شکست همه؛) p (شکست کلمه: نگه داشتن همه؛)

3. کلمات را در خط کلمه پیچیدن بپیچید

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

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

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

شرح مثال
<тип>
نوع مقدار را نشان می دهد. <размер>

A & B مقادیر باید به ترتیب مشخص شده خروجی شوند. <размер> && <цвет>

A |  ب نشان می دهد که شما باید فقط یک مقدار از مقادیر پیشنهادی (A یا B) انتخاب کنید. عادی |  کلاه های کوچک
الف ||  ب هر مقدار را می توان به طور مستقل یا همراه با دیگران به هر ترتیبی استفاده کرد. عرض ||  شمردن

مقادیر گروه ها [ محصول ||  صلیب ]
*
صفر یا چند بار تکرار کنید. [,<время>]*

+
یک یا چند بار تکرار کنید. <число>+

?
نوع، کلمه یا گروه مشخص شده اختیاری است. درونی؟
(الف، ب) حداقل A را تکرار کنید، اما نه بیشتر از B بار. <радиус>{1,4}

#
یک یا چند بار با کاما از هم جدا شده اند. <время>#

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


 
 
 فضای سفید
 
 
 
 
مثال
 
 
 
 آخرین قضیه فرما

 ایکس ⁿ+ Y ⁿ= ز ⁿ
که در آن n یک عدد صحیح > 2 است
 
 
 

نتیجه این مثالدر شکل نشان داده شده است.  1.
برنج.  1. اعمال ویژگی فضای سفید
مدل شی
یک شی.style.whitespace
توجه داشته باشید
مرورگر اینترنت اکسپلوررتا نسخه 7.0 شامل مقادیر pre-line و pre-wrap را پشتیبانی نمی کند.  برای مقادیر نرمال و پیش مانند قبل از بسته بندی عمل می کنند و مقدار nowrap مانند پیش خط عمل می کند.</p><p>Opera قبل از نسخه 9.5 از مقدار pre-line پشتیبانی نمی کند.  برای <textarea>مقادیر نرمال و پیش مانند قبل از بسته بندی عمل می کنند و مقدار nowrap مانند پیش خط عمل می کند.</p><p>در فایرفاکس برای <textarea>مقادیر normal، nowrap و pre به عنوان pre-wrap در نظر گرفته می شوند.</p><h2>مشخصات</h2><p>هر مشخصات از چندین مرحله تایید می گذرد.</p><ul><li>توصیه - مشخصات توسط W3C تایید شده است و به عنوان یک استاندارد توصیه می شود.</li><li>توصیه نامزد ( <span><a href="https://bumotors.ru/fa/vozdeistvie-vai-fai-na-organizm-cheloveka-rekomendacii-po-umensheniyu.html">توصیه احتمالی</a>
</span>) - گروه مسئول استاندارد از رسیدن به اهداف خود راضی است، اما برای اجرای استاندارد از جامعه توسعه کمک می خواهد.</li><li>توصیه پیشنهادی <span>توصیه پیشنهادی</span>) - در این مرحله سند برای تایید نهایی به شورای مشورتی W3C ارائه می شود.</li><li>پیش نویس کاری - نسخه بالغ تر یک پیش نویس که برای بررسی جامعه مورد بحث و اصلاح قرار گرفته است.</li><li>پیش نویس سردبیر ( <span>پیش نویس سرمقاله</span>) - نسخه پیش نویس استاندارد پس از ایجاد تغییرات توسط ویراستاران پروژه.</li><li>پیش نویس ( <span>پیش نویس مشخصات</span>) - اولین نسخه پیش نویس استاندارد.</li>
</ul>×

 <p>هنگام ایجاد طرح‌بندی، وب‌مسترها به صورت دوره‌ای یک سؤال دارند: متن چگونه منتقل می‌شود؟  در بیشتر موارد، مرورگر این کار را به تنهایی انجام می دهد.  اما گاهی اوقات این فرآیند باید تحت کنترل باشد، مخصوصاً هنگام قالب بندی کلمات و عبارات طولانی که اگر اشتباه ترجمه شوند، معنای خود را از دست می دهند.</p>
<h2>ویژگی word-wrap</h2>
<p>در HTML راهی برای جداسازی خطوط وجود دارد <a href="https://bumotors.ru/fa/kak-rasstavit-h1-h6-v-statyah-teg-h1-eto-zagolovok-stranicy-formatirovanie-teksta-pri-pomoshchi-spec.html">برچسب ویژه</a> <br>.  اما استفاده بیش از حد از آن در بین توسعه دهندگان رفتار بد تلقی می شود و اغلب نشان دهنده غیرحرفه ای بودن است.  به عنوان مدرک، تصور کنید که یک لوگو دارید و می خواهید هر حرف از یک خط جدید شروع شود:</p>
<p><!DOCTYPE html><br>
<html lang=»en»><br>
<head><br>
 <meta charset=»UTF-8″><br>
 <title>بررسی بازنویسی کلمات</title><br>
 <meta name=»viewport» content=»width=device-width, initial-scale=1″><br>
</head><br>
<body><br>
 <br>
 <p class=»logo»>L <br>O <br>جی <br>O <br>تی <br>و <br>پ</p><br>
 <br>
</body><br>
</html></p>
<p>نتیجه کد دست و پا گیر و زشتی است که باعث شوک فرهنگی هر توسعه دهنده ای می شود.  و اگر می خواهید لوگو به صورت افقی روی نسخه دسکتاپ قرار گیرد و اگر عرض صفحه کمتر از 550 پیکسل باشد به صورت عمودی باید چه کار کنید؟  بنابراین، برای پیکربندی <a href="https://bumotors.ru/fa/shipit-kakaya-to-detal-na-sheme-oboznachenie-radiodetalei-na-sheme-i.html">ظاهر</a>عناصر همیشه از شیوه نامه های آبشاری استفاده می کنند.  علاوه بر این، با کمک <a href="https://bumotors.ru/fa/konverter-css-v-chitaemyi-vid-instrumenty-dlya-formatirovaniya.html">ابزارهای CSS</a>شکستن خطوط به روشی زیباتر انجام می شود.  در این حالت هیچ نشانه گذاری اضافی وجود ندارد که فقط سرعت بارگذاری صفحه را کاهش می دهد.</p>
<p><img src='https://i2.wp.com/ruud.ru/wp-content/uploads/2018/09/5d5880b13be3abfffe522afbabb7a4dd.jpg' width="100%" loading=lazy loading=lazy></p>
<p>اولین ویژگی که برای پردازش متن باید به آن دسترسی داشته باشید word-wrap است.  سه مقدار را می پذیرد: نرمال، شکست همه چیز و نگه داشتن همه.  برای کار، فقط باید به خاطر بسپارید که همه چیز را شکست دهید.  Normal پیش فرض است و هیچ فایده ای برای تعیین آن ندارد.  Keep-all به معنی در است <a href="https://bumotors.ru/fa/vnedrenie-css-v-html-dokument-vklyuchenie-css-v-html-kod.html">سند CSS</a>ممنوعیت شکست خطوط  به طور خاص برای شخصیت های چینی، ژاپنی و کره ای طراحی شده است.  بنابراین، اگر قصد ندارید به یکی از این زبان ها وبلاگ نویسی کنید، دارایی برای شما مفید نخواهد بود.  و همچنین پشتیبانی نمی شود <a href="https://bumotors.ru/fa/vosstanovit-udalennuyu-istoriyu-brauzera-safari-i-zakladki-chto.html">مرورگر سافاری</a>و <a href="https://bumotors.ru/fa/kak-vybrat-mobilnyi-telefon-vidy-mobilnyh-telefonov-kakimi.html">تلفن های همراه</a>بر اساس iOS</p>
<p>برای تخصیص لوگوی مثال قبلی با <a href="https://bumotors.ru/fa/prozrachnyi-belyi-fon-css-prozrachnost-fona-css-prozrachnyi-fon-ili-tekst-s.html">با استفاده از CSS</a>برای انتقال هر حرف به یک خط جدید، باید کد زیر را بنویسید:</p>
<p>پ( <br>فونت: پررنگ 30px Helvetica, sans-serif; <br>عرض: 25 پیکسل؛ <br>word-wrap: break-all; <br>
}</p>
<p>عرض و اندازه فونت به گونه ای انتخاب شده است که فضای کافی برای تنها یک حرف وجود داشته باشد.  Word-wrap با مقدار break-all به مرورگر می گوید که هر بار کلمه را در یک خط جدید بشکند.  این خاصیت را نمی توان غیر قابل تعویض نامید.  اما هنگام طراحی بلوک های کوچک متن، مانند فیلدهایی برای وارد کردن نظرات، مفید است.</p>
<p><img src='https://i1.wp.com/ruud.ru/wp-content/uploads/2018/09/60e2fe1a10000329efe53f71c6abf676.jpg' width="100%" loading=lazy loading=lazy></p>
<h2>دارایی فضای سفید</h2>
<p>اشتباه رایج توسعه دهندگان وب جدید این است که سعی می کنند متن را با فاصله یا کلیک ویرایش کنند. <a href="https://bumotors.ru/fa/modelirovanie-informacionnyh-sistem-obshchie-trebovaniya-k-vypolneniyu.html">کلیدها را وارد کنید</a>و سپس تعجب کنید که چرا تلاش های آنها در صفحه نمایش داده نمی شود.  مهم نیست که چند بار Enter را فشار دهید، مرورگر آن را نادیده می گیرد.  اما راهی وجود دارد که با در نظر گرفتن تمام فاصله ها، متن را آنطور که می خواهید نمایش دهید.</p>
<p>در سند <a href="https://bumotors.ru/fa/css-zapretit-perenos-div-v-yacheike-tablicy-kak-dobavit-s-pomoshchyu.html">انتقال CSS</a>رشته اختصاص داده شده با ویژگی فضای سفید را می توان به گونه ای پیکربندی کرد که فاصله ها را رعایت کند یا کلید Enter را وارد کنید.  فضای سفید با مقدار pre-line مرورگر را مجبور می کند تا Enter را در متن مشاهده کند.</p>
<p><!DOCTYPE html><br>
<html lang=»en»><br>
<head><br>
 <meta charset=»UTF-8″><br>
 <title>بررسی بازنویسی کلمات</title><br>
 <meta name=»viewport» content=»width=device-width, initial-scale=1″><br>
 <style type=»text/css»><br>
 body{<br>
 width: 100%;<br>
 margin: 0;<br>
 padding: 0;<br>
 display: flex;<br>
 justify-content: center;<br>
 -ms-align-items: center;<br>
 align-items: center;<br>
 }<br>
 #wrapper{<br>
/*Элементу-контейнеру необходимо обязательно задать ширину!*/<br>
 width: 60%;<br>
 background: linear-gradient(to bottom, rgba(0,0,0,.1),rgba(0,0,0,.8));</p>
<p>}<br>
 #wrapper p{<br>
 color: #FFF;<br>
 padding: 10px;<br><br>
 white-space: pre-line;<br>
 }<br>
 </style><br>
</head><br>
<body><br>
 <br>
 <p class=»text-to-wrap»>بعد از <br>هر کس <br>کلمات <br>من <br>فشار می دهم <br>کلید <br>"ورودی". <br>
 </p><br>
 <br>
</body><br>
</html></p>
<p>اگر در کد CSS خود، pre-line را به pre-wrap تغییر دهید، خط بسته بندی فضای خالی را در نظر می گیرد.  و بالعکس، با اختصاص دادن یک ویژگی فضای سفید به متن با مقدار nowrap، هرگونه بسته بندی را ممنوع کنید:</p>
<p>#لفافه p( <br>رنگ: #FFF; <br>بالشتک: 10 پیکسل؛ <br>فونت: پررنگ 16px Helvetica, sans-serif; <br>فضای سفید: nowrap;</p>
<h2>سرریز متن</h2>
<p>یکی دیگر <a href="https://bumotors.ru/fa/statistika-i-analitika-akkaunta-v-twitter-poleznye-instrumenty.html">ابزار مفید</a>برای کار با متن - این سرریز متن است.  علاوه بر شکستن خطوط، ویژگی CSS به شما امکان می دهد وقتی ظرف پر است، محتوا را برش دهید.  دو مقدار می گیرد:</p>
<ul><li>کلیپ - به سادگی متن را برش می دهد.</li>
<li>بیضی - بیضی اضافه می کند.</li>
</ul><p>#لفافه p( <br>رنگ: #FFF; <br>بالشتک: 10 پیکسل؛ <br>فونت: پررنگ 16px Helvetica, sans-serif; <br>متن سرریز: بیضی؛/*بیضی اضافه کنید*/ <br>فضای سفید: nowrap;  /* غیرفعال کردن بسته بندی خط */ <br>سرریز: پنهان؛/*پنهان کردن هر چیزی که فراتر از ظرف است*/</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/kak-otkryt-redaktor-reestra-windows-7-kak-otkryt-redaktor-reestra-windows-chto.html">
                                        <div class="img_container"><img src="/uploads/ae4e9cb256eca5ff05611bd742d2a152.jpg" border="0" alt="نحوه باز کردن ویرایشگر رجیستری ویندوز" width="320" height="180" / loading=lazy loading=lazy></div>
                                        <span class="theme-post-link">نحوه باز کردن ویرایشگر رجیستری ویندوز</span>
                                    </a>
                                </div>
                                                             <div class="theme-post col-sm-4">
                                    <a href="https://bumotors.ru/fa/rezervnoe-kopirovanie-sms-na-e-mail-kak-nastroit-peresylku-vseh.html">
                                        <div class="img_container"><img src="/uploads/5dbf441877be354841ad49ec496f2248.jpg" border="0" alt="نحوه تنظیم فوروارد همه نامه ها از یک ایمیل به نامه دیگر!" width="320" height="180" / loading=lazy loading=lazy></div>
                                        <span class="theme-post-link">نحوه تنظیم فوروارد همه نامه ها از یک ایمیل به نامه دیگر!</span>
                                    </a>
                                </div>
                                                             <div class="theme-post col-sm-4">
                                    <a href="https://bumotors.ru/fa/sukin-board-powered-by-smf-kak-zashchitit-svoi-forum-na-simple-machines-smf-ot-spama.html">
                                        <div class="img_container"><img src="/uploads/278b58a724972cccea88e737163b1339.jpg" border="0" alt="چگونه از تالار گفتمان Simple Machines (SMF) خود در برابر هرزنامه محافظت کنیم" width="320" height="180" / loading=lazy loading=lazy></div>
                                        <span class="theme-post-link">چگونه از تالار گفتمان Simple Machines (SMF) خود در برابر هرزنامه محافظت کنیم</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="https://vk.com/share.php?url=https://bumotors.ru/perenos-stroki-v-yacheike-html-kak-dobavit-s-pomoshchyu-svoistv-css-perenos.html" class="vk social-ico"></a>
                            <a href="https://www.facebook.com/sharer/sharer.php?u=https://bumotors.ru/perenos-stroki-v-yacheike-html-kak-dobavit-s-pomoshchyu-svoistv-css-perenos.html" class="fb social-ico"></a>
                            <a href="https://www.twitter.com/share?url=https%3A%2F%2Fbumotors.ru%2Ffa%2Fperenos-stroki-v-yacheike-html-kak-dobavit-s-pomoshchyu-svoistv-css-perenos.html" 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">© 2023 bumotors.ru.  نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی.  پرتال اطلاعاتی</span>
                </div>
            </div>
        </div>
    </div>

    


    
</body>

</html>

	شرح	مثال
<тип>	نوع مقدار را نشان می دهد.	<размер>
A & B	مقادیر باید به ترتیب مشخص شده خروجی شوند.	<размер> && <цвет>
A \| ب	نشان می دهد که شما باید فقط یک مقدار از مقادیر پیشنهادی (A یا B) انتخاب کنید.	عادی \| کلاه های کوچک
الف \|\| ب	هر مقدار را می توان به طور مستقل یا همراه با دیگران به هر ترتیبی استفاده کرد.	عرض \|\| شمردن
	مقادیر گروه ها	[ محصول \|\| صلیب ]
*	صفر یا چند بار تکرار کنید.	[,<время>]*
+	یک یا چند بار تکرار کنید.	<число>+
?	نوع، کلمه یا گروه مشخص شده اختیاری است.	درونی؟
(الف، ب)	حداقل A را تکرار کنید، اما نه بیشتر از B بار.	<радиус>{1,4}
#	یک یا چند بار با کاما از هم جدا شده اند.	<время>#