html - CSS 属性指定字符串可以在哪些字符上断开

Question

如果我有一个很长的字符串(如 URL)，浏览器会在某些字符处断开它，例如 -，我可以指定字符串应该断开的其他字符吗？

例如:

https://www.this-is-my-url.org/upload_dir/2015/01/foo_bar_faq.pdf

如果框中每行有足够的空间容纳 40 个字符，它会像这样中断:

                                        | <- this is 40 chars mark
https://www.this-is-my-
url.org/upload_dir/2015/01/foo_bar_faq.pdf

最后一行甚至会导致溢出，因为没有“breakable char”。我正在寻找像这样的 CSS 属性:

p.url {
  word-break-chars: "_/.";
}

因此 URL 可能会在 _、/ 或 处中断。它看起来更像:

                                        |
https://www.this-is-my-url.org/upload_
dir/2015/01/foo_bar_faq.pdf

word-break: break-all; 不是我的选择!看起来很糟糕:

                                        |
https://www.this-is-my-url.org/upload_di
r/2015/01/foo_bar_faq.pdf

Answer 1

也许你可以使用text-overflow: clip;

p{
    white-space: nowrap; 
    width: 12em; 
    overflow-x: auto;
    text-overflow: clip; 
    border: 1px solid #000000;
}

<p title="https://www.this-is-my-
url.org/upload_dir/2015/01/foo_bar_faq.pdf">https://www.this-is-my-
url.org/upload_dir/2015/01/foo_bar_faq.pdf</p>