ترفندهای حرفه ای و پیشرفته Front End (جلسه ۱۸) : Padded text یا padding دادن به متون چند خطی – قسمت ۲

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

دیدید که در جلسه قبل در مورد متنهای Inline چندخطی صحبت کردیم و تلاش کردیم که برای اونا پس زمینه قرار بدیم. چیزی که آخر به اون رسیدیم شبیه به تصویر بالا بود. میبینید که padding به همه خطوط اعمال نشده و فقط سمت چپ خط اول و سمت راست خط آخر دارای Padding هست. چیزی که ما قصد داریم اینه که سمت چپ و راست همه خطوط دارای padding بشه. ما یه راه مطمئن و قابل پیش بینی میخوایم و قصد داریم کاری کنیم که همه مشکلات اینچنینی برطرف بشن. تعدادی راه حل برای این مشکل وجود داره و در ادامه یکی یکی اونا رو بررسی میکنیم.

روش اول: استفاده از کلاسهای کاذب و ویژگی white-space

روشی که در این زمینه وجود داره استفاده از ویژگی white-space: pre-wrap; هست که باعث میشه که سطوح ناهموار سمت راست که در انتهای خطوط قرار داره نیز دارای padding بشن. پس با استفاده از این ویژگی تونستیم مشکل padding سمت راست رو برطرف کنیم. حالا برای برطرف کردن padding سمت چپ، میتونیم از کلاسهای کاذب استفاده کنیم و با استفاده از CSS positioning اون رو در جای مناسب قرار بدیم. برای اینکار بصورت زیر عمل میکنیم. کد HTML بصورت زیر میشه:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

کد CSS هم بصورت زیر هست:

* {
  margin: 0;
  padding: 0;
}
html {
  font: 1em/1.5 Georgia, serif;
  padding: 5%;
}
body {
  width: 400px;
}
h1 {
  font-size:1.5rem;
}

/* Heading style */
.title,
.title:after{
  background-color: #333;
}
.title {
  position: relative;
  line-height: 1;
  color: #fff;
  display: inline;
  white-space: pre-wrap;
  border: 0 solid #333;
  border-width: 0.25em 0; /* 0.25em is roughly equal to one space character. */
}
.title:after {
  content: "";
  position: absolute;
  top: -0.25em;
  right: 100%;
  bottom: -0.25em;
  width: 0.25em;
}
.title > span {
  position: relative;
  z-index: 1;
}

همونطور که دیدید موارد مورد نظر اعمال شدن. حالا اگر درون مرورگر Chrome این نمونه رو باز کنیم، خروجی بصورت زیر خواهد بود:padded line text 5

میبینید که به هدفمون رسیدیم. تنها مشکلی که این نمونه داره نحوه نمایش اون درون مرورگر Firefox هست. درون Firefox بصورت زیر هست:padded line text 6

میبینید که موقعیت کلاس کاذبی که در سمت چپ قرار گرفته درون Firefox ایراد داره. این مشکل شاید قابل حل شدن باشه ولی از اون میگذریم و سراغ روشهای بعدی میریم.

روش دوم: استفاده از box-shadow

در این روش ما با استفاده از box-shadow، سایه‌های افقی با spread صفر رو برای هر خط قرار میدیم و به هدفمون میرسیم. کدهای HTML زیر رو در نظر بگیرید:

DEFAULT: This is how highlighted text usally wraps. It gets tight on the left and right edges.

کدهای CSS زیر رو هم در نظر بگیرید:

html,
body {
  background: #ccc;
  text-align: left;
  padding: 3%;
}

h1.title {
  font-size: 3em;
}

.title {
  font: 36px/1.25 Ubuntu, sans-serif;
  text-transform: uppercase;
  margin-bottom: 1em;
}
.title .padded-multi-line {
  display: inline;
  background: #ee4035;
  color: #fff;
  padding: 0.25em 0;
  box-shadow: 10px 0 0 #ee4035, -10px 0 0 #ee4035;
}

خروجی در مرورگر Chrome بصورت زیر خواهد بود:padded line text 7

میبینید که همه مواردی که مورد نظر ما هست، رعایت شده هست. این روش رو هم زمانی که درون Firefox باز میکنید به مشکل برخواهید خورد و بصورت زیر خواهد بود:padded line text 8

برای رفع این مشکل باید ویژگی box-decoration-break: clone; رو قرار بدیم. با اینکار کدهای CSS بصورت زیر خواهد شد:

html,
body {
  background: #ccc;
  text-align: left;
  padding: 3%;
}

h1.title {
  font-size: 3em;
}

.title {
  font: 36px/1.25 Ubuntu, sans-serif;
  text-transform: uppercase;
  margin-bottom: 1em;
}
.title .padded-multi-line {
  display: inline;
  background: #ee4035;
  color: #fff;
  padding: 0.25em 0;
  box-shadow: 10px 0 0 #ee4035, -10px 0 0 #ee4035;
  box-decoration-break: clone;
}

خروجی هم بصورت زیر خواهد شد:padded line text 9

بهمین راحتی. در جلسات بعد با ادامه روشها در خدمتتون هستیم.

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

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

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

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0