تخفیف ویژه

ترفندهای حرفه ای و پیشرفته Front End (جلسه 14) : استایل دهی کلمات طولانی یا long words - قسمت 2

دسته بندی: آموزش
زمان مطالعه: 6 دقیقه
۲۲ آبان ۱۳۹۵

در این جلسه با یه ترفند حرفه ای و پیشرفته دیگه در خدمتتون هستیم و امیدواریم که بتونید از اون استفاده کنید.long-word-hyphens

در جلسه قبل توضیحاتی در مورد استایل دهی به Long Words خدمتتون دادیم و اینجا میخایم توضیحاتو ادامه بدیم.

استفاده از ویژگی word-break

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

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<title>Long Words</title>
	<style type="text/css">
		html {
		  background: #eee;
		}

		div {
		  background: #fff;
		  padding: 10px 20px;
		  width: 400px;
		  margin: 0 auto;
		}

		h1 {
		  font-family: Helvetica, Arial, sans-serif;
		  font-weight: normal;
		  font-size: 36px;
		}

		.word-break {
		  -ms-word-break: break-all;
		  word-break: break-all;
		  word-break: break-word;
		}

		p {
		  font-size: 20px;
		}
	</style>
</head>
<body>
	<div>
		<h1 class="word-break">Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</h1>
		<p>The word - which refers to the "law for the delegation of monitoring beef labelling", has been repealed by a regional parliament after the EU lifted a recommendation to carry out BSE tests on healthy cattle. German is famous for its compound nouns, which frequently become so cumbersome they have to be reduced to abbreviations. The beef labelling law, introduced in 1999 to protect consumers from BSE, was commonly transcribed as the "RkReÜAÜG", but even everyday words are shortened to initials so Lastkraftwagen - lorry - becomes Lkw.</p>
    </div>
</body>
</html>

همونطور که دیدید یک کلاس بنام word-break به h1 دادیم و درون css به اون استایل دهی کردیم. دیدید که از ویژگی word-break استفاده کردیم و مقادیر break-all و break-word رو برای اون در نظر گرفتیم. خروجی در مرورگر بصورت زیر خواهد شد:long-word-word-wrap

همونطور که دیدید کلمه در این حالت از div بیرون نزده و بین خطوط بیشتری شکسته شده. مرورگرها از این ویژگی‌ها پشتیبانی خیلی خوبی دارن ولی مرورگر Opera mini از این ویژگی پشتیبانی نمیکنه. استفاده از این ویژگی به بصورت همزمان با Hyphen در بعضی از مرورگرها مشکلاتی رو بوجود میاره.

استفاده از ویژگی overflow-wrap

ویژگی دیگه ای که در این زمینه میتونین از اون کمک بگیرین ویژگی overflow-wrap یا word-wrap هست. با استفاده از این ویژگی به مرورگر میگیم که به خط جدید بره. کد زیر رو در نظر بگیرید:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<title>Long Words</title>
	<style type="text/css">
		html {
		  background: #eee;
		}

		div {
		  background: #fff;
		  padding: 10px 20px;
		  width: 400px;
		  margin: 0 auto;
		}

		h1 {
		  font-family: Helvetica, Arial, sans-serif;
		  font-weight: normal;
		  font-size: 36px;
		}

		.word-wrap {
		  word-wrap: break-word;
		  overflow-wrap: break-word;
		}

		p {
		  font-size: 20px;
		}
	</style>
</head>
<body>
	<div>
		<h1 class="word-wrap">Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</h1>
		<p>The word - which refers to the "law for the delegation of monitoring beef labelling", has been repealed by a regional parliament after the EU lifted a recommendation to carry out BSE tests on healthy cattle. German is famous for its compound nouns, which frequently become so cumbersome they have to be reduced to abbreviations. The beef labelling law, introduced in 1999 to protect consumers from BSE, was commonly transcribed as the "RkReÜAÜG", but even everyday words are shortened to initials so Lastkraftwagen - lorry - becomes Lkw.</p>
    </div>
</body>
</html>

همونطور که دیدید ویژگی‌های word-wrap و overflow-wrap رو مشخص کردیم و اونا رو برابر با مقدار break-word قرار دادیم. خروجی در مرورگر بصورت زیر هست:long-word-word-wrap

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

استفاده از ... یا Ellipsis

راه دیگه ای که میتونیم کلمات طولانی رو مدیریت کنیم اینه که اونا رو قطع کنیم و اضافه اونا رو نمایش ندیم و بجاش ... بزاریم و به این معنا باشه که ادامه داره. برای اینکار بصورت زیر عمل میکنیم:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<title>Long Words</title>
	<style type="text/css">
		html {
		  background: #eee;
		}

		div {
		  background: #fff;
		  padding: 10px 20px;
		  width: 400px;
		  margin: 0 auto;
		}

		h1 {
		  font-family: Helvetica, Arial, sans-serif;
		  font-weight: normal;
		  font-size: 36px;
		}

		.ellipsis {
		  overflow:hidden; 
		  white-space: nowrap;
		  text-overflow: ellipsis;
		}

		p {
		  font-size: 20px;
		}
	</style>
</head>
<body>
	<div>
		<h1 class="ellipsis">Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</h1>
		<p>The word - which refers to the "law for the delegation of monitoring beef labelling", has been repealed by a regional parliament after the EU lifted a recommendation to carry out BSE tests on healthy cattle. German is famous for its compound nouns, which frequently become so cumbersome they have to be reduced to abbreviations. The beef labelling law, introduced in 1999 to protect consumers from BSE, was commonly transcribed as the "RkReÜAÜG", but even everyday words are shortened to initials so Lastkraftwagen - lorry - becomes Lkw.</p>
    </div>
</body>
</html>

همونطور که دیدید کلاس ellipsis رو اضافه کردیم. در ابتدا گفتیم که هر چیزی بیرون از h1 قرار گرفت، hidden یا مخفی بشه. همچنین با استفاده از ویژگی text-overflow مشخص کردیم که هر چیزی بیرون از محدوده قرار گرفت، بجاش ... یا Ellipsis قرار بگیره. ویژگی text-overflow تقریبا در همه مرورگرها پشتیبانی میشه.

همه موارد بالا در مرورگرهای مختلفی تست شدن و نتایج اون در اینجا قرار گرفته و میتونین اونا رو ببینید. اگر + بود یعنی پشتیبانی میشه و اگر - بود یعنی پشتیبانی نمیشه.

راه حل نهایی

کد زیر رو در نظر بگیرید:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<title>Long Words</title>
	<style type="text/css">
		html {
		  background: #eee;
		}

		div {
		  background: #fff;
		  padding: 10px 20px;
		  width: 400px;
		  margin: 0 auto;
		}

		h1 {
		  font-family: Helvetica, Arial, sans-serif;
		  font-weight: normal;
		  font-size: 36px;
		}

		.hyphenate {
		  overflow-wrap: break-word;
		  word-wrap: break-word;
		  -webkit-hyphens: auto;
		  -ms-hyphens: auto;
		  -moz-hyphens: auto;
		  hyphens: auto;
		}

		p {
		  font-size: 20px;
		}
	</style>
</head>
<body>
	<div>
		<h1 class="hyphenate">Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</h1>
		<p>The word - which refers to the "law for the delegation of monitoring beef labelling", has been repealed by a regional parliament after the EU lifted a recommendation to carry out BSE tests on healthy cattle. German is famous for its compound nouns, which frequently become so cumbersome they have to be reduced to abbreviations. The beef labelling law, introduced in 1999 to protect consumers from BSE, was commonly transcribed as the "RkReÜAÜG", but even everyday words are shortened to initials so Lastkraftwagen - lorry - becomes Lkw.</p>
    </div>
</body>
</html>

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

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.