วันพุธที่ 29 สิงหาคม พ.ศ. 2561

วิธีทำให้ข้อความขึ้นบรรทัดใหม่บนมือถือ (Responsive) - การทำเว็บไซต์

ทำได้ง่ายมากครับ โดยเอา tag span คลุมทั้ง 2  element (ค่า default display ของ span คือ inline ครับ เวลาแสดงบนมือถือเราเลยต้องกำหนดเป็น display:block; เพื่อให้ element ขึ้นบรรทัดใหม่) 

ตัวอย่างคร่าวๆนะครับ

<p><span>text บรรทัดแรก</span><span class="new-line">text ที่อยากให้แสดงผลในมือถือขึ้นบรรทัดใหม่</span></p>

และกำหนดให้เมื่อแสดงบนมือถือ ให้แสดงผลเป็น block เช่น

@media only screen and (max-width: 600px) {
.new-line {
      display:block;
}
}

เท่านี้ก็เสร็จเรียบร้อยครับ หากสงสัยสอบถามเพิ่มเติมได้ในเพจเลยนะครับ

ไม่มีความคิดเห็น :

แสดงความคิดเห็น