分類
程式技術

因為url過長而導致破版的調整方式

由於在現行 css 預設結構下, url 不會主動斷行, 也就是有時過長的 url 會導致破版或出版的狀況.

如何解決這個問題, 可以利用 css 的手法來調整, 利用以下參數:

.dont-break-out {

  /* 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/

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。