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 

和最後一行，甚至會導致溢出，因爲有不是「易碎的字符」。我正在尋找像一個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

由於JavaForAndroid「的評論我計算出這個jQuery的解決方案：

$(document).ready(
    $('.download a').each(function(){ 
     var newText = $(this).text().replace('_', '_\u200B') 
       .replace('/', '/\u200B') 
       .replace('.', '.\u200B'); 

     $(this).text(newText); 
    }) 
); 

那裏\u200B是「零寬度空間」的Unicode。

的HTML看起來像：

<div class="download"> 
    <a href="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 
    </a> 
    <a href="https://www.this-is-my-url.org/upload_dir/2014/11/foo_bar.pdf"> 
     https://www.this-is-my-url.org/upload_dir/2014/11/foo_bar.pdf 
    </a> 
</div> 

Answer 2

也許你可以使用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>