جلسه‌ی پنجاه و پنجم: خصوصیت word-spacing در CSS

در جلسات پیش با خصوصیت‌های White-space (برای دیدن آموزش خصوصیت White-space در CSS کلیک کنید) و Letter-spacing (برای دیدن آموزش خصوصیت Letter-spacing در CSS کلیک کنید) آشنا شده‌اید. می دانید که این خصوصیت‌ها برای ایجاد فواصل استفاده می‌شوند. در این جلسه می‌خواهیم به توضیح یکی دیگر از این فواصل بپردازیم. (برای دیدن آموزش CSS به زبان ساده کلیک کنید)

خصوصیت word-spacing در CSS

به وسیله‌ی خصوصیت word-spacing می‌توانیم میان کلمات درون یک جمله فاصله ایجاد کنیم. البته باید توجه داشته باشید که در این خصوصیت می‌توانید فاصله‌ی ایجاد شده را علاوه بر زیاد شدن کمتر نیز بنمایید.

نکته: از آنجایی که خصوصیت word-spacing  با خصوصیت Letter-spacing شباهت زیادی دارند در هنگام استفاده از آن دقت کافی را داشته باشید.

حالات خصوصیت word-spacing در CSS

این خصوصیت به طور کلی دو حالت اصلی دارید که ما از آن‌ها استفاده می‌کنیم. این حالات عبارتند از:

• Normal
• Height

حالت Normal 

عموماً به وسیله‌ی حالت Normal تمامی اندازه‌های ایجاد شده در خصوصیت word-spacing به حالت اولیه باز می گردند.

حالت Height

در این حالت می‌توانیم میزان فاصله‌ی بین کلمات خود را افزایش یا کاهش دهیم. برای فهم بیشتر این مطلب به مثال زیر توجه کنید:

کد HTML:

<div class="box">
 <p>
   فاصله‌ی بین این کلمات ۲۰px می‌باشد.
 </p>
</div>

کد CSS:

body {
    background-color: #fff;
}

.box {
  width: 600px;
  height: 300px;
  font-size: 30px;
  color: #000;
  border: 3px solid #888;
  border-radius: 15px;
  margin: 0px auto;
  padding: 10px;
  background-color:#a3d29c;
  text-align: center;
  }
.box {
  word-spacing: 20px;
}
.box:hover {
  word-spacing: normal;
  transition: 1s
}

خروجی کد بالا:

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

نکته: یادتان باشد که این خصوصیت در تمامی مرورگرها پشتیبانی می‌شود.

نکته: در این خصوصیت شما می‌توانید از اندازه‌های منفی نیز استفاده کرده و کلمات را به یکدیگر نزدیکتر نمایید.

نکته: یادتان باشد که خصوصیت‌های Text-align و یا White-space نیز بر روی خصوصیت word-spacing نیز تأثیر می‌گذارند و ممکن است میزان اندازه‌ها را تغییر دهند.

خلاصه مطلب:

1. به وسیله‌ی خصوصیت word-spacing می‌توانیم میان کلمات درون یک جمله فاصله ایجاد کنیم.
2. عموماً به وسیله‌ی حالت Normal تمامی اندازه‌های ایجاد شده در خصوصیت word-spacing به حالت اولیه باز می گردند.
3. در این حالت می‌توانیم میزان فاصله‌ی بین کلمات خود را افزایش یا کاهش دهیم.