วันศุกร์ที่ 4 สิงหาคม พ.ศ. 2560

จัดการปัญหา Link ยาวๆ ตกขอบโดยใช้ css

วิธีการจัดการ หากมีลิงค์ที่โคตรจะยาวเช่น http://register.acer.co.th/WarrantyCheck/warr_chk.aspx ซึ่งหากเปิดใน PC ก็อาจจะดูปกติ แต่ถ้าเปิดจากมือถือจะเห็นว่ามันตกขอบออกมาจาก DIV ที่เราคลุมไว้ ให้ใส่คำสั่งเหล่านี้เข้าไปใน DIV นั้นด้วยครับ

/* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;



เครดิตโค๊ดที่มาครับผม https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/