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

خصوصیت 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
}

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

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

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

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

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

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

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

خلاصه مطلب:

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

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها

    محبوب ترین برنامه های این ماه

    برترین مقالات این ماه

    متاسفم مطلبی برای نمایش وجود ندارد