如何使CSS插入行沒有空白空間？

我需要一些CSS的幫助，我正在嘗試使用。我正在使用Chrome進行測試，但我需要一個不是特定於瀏覽器的解決方案。如何使CSS插入行沒有空白空間？

我有一個頁面分爲兩個iframe：左側的一個窄頁面包含一個目錄，右側的一個顯示所選頁面。我想在左側框架的底部顯示所選頁面的URL。如果它太長而不適合框架（通常是這樣），它應該換行到第二行，並且第一行應該向上移動，以便最後一行保持底部對齊。

在內容iframe的表格頁面的結構是這樣的：

<body> 
    <div> 
     <script...> <!--JavaScript that generates the table of contents--> </script> 
    </div> 
    <div id='showPageUrl' style="height:auto;position:absolute;bottom:0"></div> 
    <script...> showURL(document.URL) </script> 
</body>

以下功能是通過加載頁面（從onclick事件）的JavaScript代碼執行，也可以通過HTML是加載初始頁面（上圖）。

function showUrl(url) { 
     var sel = document.getElementById('showPageUrl'); 
     if (sel!==null) { 
     sel.innerHTML = url; 
     } 
    }

的問題：如果URL是太長，無法在同一行不換行，因爲它不包含空格字符的包。相反，框架發芽水平滾動條。如果我用一段包含空格的文本替換URL，文本將以空白字符分隔並正確顯示。

我查找了一個CSS屬性，以使網址在任何地方斷裂，但我找不到任何東西。所有換行符控件似乎都是，假設有空格，並改變渲染引擎對待它的方式。

我該做些什麼才能使一個URL（沒有空白）在行末結束？

來源

2014-02-14 Jonathan Sachs

有一個的jsfiddle？ – Raad

#showPageUrl { word-break: break-all; }

參考：http://www.w3schools.com/cssref/css3_pr_word-break.asp

來源

2014-02-14 15:55:29

您正在尋找的overflow-wrap CSS屬性（傳統word-wrap）：

.example { 
    word-wrap: break-word; 
    overflow-wrap: break-word; 
}

文檔：http://www.w3.org/TR/css3-text/#overflow-wrap

瀏覽器支持：http://caniuse.com/#search=overflow-wrap

DEMO：http://jsfiddle.net/aueL3/2/

來源

2014-02-14 15:55:41 gvee

打破一個URL *任何地方*不*適當*打破。例如，打破連字符後的錯誤是錯誤的。 –

@ JukkaK.Korpela這不會破壞URL，這會改變URL的*顯示*。錨標籤的'href'不會被打破。 – gvee

更改顯示屏意味着將其拆分，就像sp 在顯示屏上顯示一個詞意味着將其打破。 –

您可以使用此css來打破網址任何地方，將要超過父母的寬度。

這裏是CSS：

.text { 
    position: absolute; 
    display: block; 
    width: 100%; 
    bottom: 0; 
    white-space: pre-wrap; /* css-3 */  
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 
    white-space: -pre-wrap; /* Opera 4-6 */  
    white-space: -o-pre-wrap; /* Opera 7 */  
    word-wrap: break-word; /* Internet Explorer 5.5+ */ 
}

最後一個小提琴：Demo

相關問題：SO Question

來源

2014-02-14 15:59:29

這是不是一個真正的CSS問題。若要指定允許的直接斷點，則可以使用<wbr>標記或零寬度空格字符。你需要決定破壞的原則;關於URL可以被破壞的地方有各種標準和做法。

首先，不要將URL放入文本內容中。它們應該出現在屬性中，如href。

來源

2014-02-14 17:19:41

零寬度空格字符＆＃x200b;對於文本來說是完美的，但是網址可能會被複制，並且當粘貼時，空間就會在那裏打破它們。由於它是隱形的，人們不會明白什麼是錯誤的，並會認爲該網址無效。由於對wbr的支持不是通用的，對於類似的問題，我將這個url分成兩個標有display：inline-block的跨度。它們就像一個不可見的空間一樣分裂，不要複製粘貼&粘貼（重要的是要避免它們之間的空格或換行符在html中或空格可見）。

<span style="display:inline-block">firstpartoflongurl</span><span style="display:inline-block">seconfpartofit</span>

*我知道這是太老了，是原作者是有用的，但可以幫助別人尋找同樣的東西

來源

2016-04-24 00:22:19 lenioia

如何使CSS插入行沒有空白空間？

回答

相關問題