คำสั่ง css เขียน writing-mode: vertical-lr ทำให้ตัวอักษรเป็นแนวตั้ง แนวดิ่งข้อความ

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
jamepiyawat
PHP VIP Members
PHP VIP Members
โพสต์: 2008
ลงทะเบียนเมื่อ: 21/05/2019 10:45 am

คำสั่ง css เขียน writing-mode: vertical-lr ทำให้ตัวอักษรเป็นแนวตั้ง แนวดิ่งข้อความ

โพสต์ที่ยังไม่ได้อ่าน โดย jamepiyawat »

หลาย ๆ คนก็คงจะเคยเรียนหรือศึกษา css กันมาบ้างแล้วเพราะว่ามันเป็นเรื่องสำคัญในการตกแต่งหน้าเว็บไซต์ของเรานั้นเองโดยส่วนใหญ่เราก็จะรู้จักกับคำสั่งที่ใช้กันบ่อย ๆ อยู่แล้วแต่วันนี้เราก็จะมานำเสนอวิธีการทำให้ตัวอักษรเป็นแนวตั้งกันจะเป็นอย่างไรลองไปดูกันเลย

โดยคำที่จะทำให้ตัวอักษรของเราเป็นแนวตั้งได้ก็คือ

โค้ด: เลือกทั้งหมด

writing-mode: vertical-lr;
นั้นเองโดยให้เรานำคำสั่งนี้ไปไว้ในไฟล์ css ของเราหรือจะนำไปเขียนเอาไว้ในไฟล์งานของเราเลยก็ได้เราลองมาดูตัวอย่างกัน

ในตัวอย่างนี้ผมก็จะใช้คำสั่ง writing-mode: vertical-lr อยู่ในไฟล์งานของผมเลยเพื่อจะได้เห็นภาพกันเง่าย ๆ นะครับโค้ดก็จะเป็นแบบนี้

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .text {
          writing-mode: vertical-lr;
          }
    </style>
  </head>
  <body>
    <div>
  <p class="text">ตัวอักษรแนวตั้ง</p>
</div>
  </body>
</html>
ผลลัพธ์ที่ได้
Selection_999(341).png
Selection_999(341).png (7.45 KiB) Viewed 2194 times
ในตัวอย่างตัวอักษรที่อยู่ในคลาส text ก็จะแสดงผมเป็นแนวตั้งให้กับเราได้แล้ว

เป็นอย่างไรกันบ้างครับสำหรับคำสั่ง writing-mode: vertical-lr เป็นอะไรที่แปลกใหม่สำหรับผู้ที่รู้จักคำสั่งนี้นะครับก็หวังว่าจะนำคำสั่งนี้ไปพัฒนางานของท่านได้นะครับก็หวังว่าบทความนี้จะเป็นความรู้ให้กับท่านได้ไม่มากก็น้อยนะครับ

บทเรียน css
https://www.mindphp.com/บทเรียนออนไลน์/บทเรียน-css.html
PlayList Css
https://www.youtube.com/playlist?list=P ... tEeTJ-cUWo
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 72