讓OSX Safari尊重css“white-space：pre”

Question

我有一個博客，我正在使用帶有div元素的ccs style =“white-space：pre”。 我這樣做是為了在博客中顯示大量的代碼示例或cli輸出..並且必須將該文本復制並粘貼到html頁面中。

我希望源代碼易於閱讀，因此希望在瀏覽器顯示時使用“white-space：pre”來保留原始輸出的空白格式。

Chrome和Firefox顯示html頁面很好，但由於一些奇怪的原因...當我要求它做“預先”時，Safari正在進行“預包裝”。 我必須有保留空白和nowrap組合功能......這是“預先”但是沒有被osx的safari所尊重。

有沒有人有這種問題的解決方法？ 我從很多測試中很清楚，firefox和chrome支持CSS前置空間屬性定義的“pre”，但osx的safari不支持。 我不想使用，因為這使我的源htm難以閱讀和管理。

提前感謝任何有用的建議。

Answer 1

我在Safari 11.0.3上遇到了同樣的問題，在jQuery對話框中有一個“whitespace：pre”格式。 使用預標簽代替並沒有解決問題。

但是，將“word-wrap：normal”添加到工作的樣式中。 這是我發現為我的場景工作的最終css：

padding: 15px;
white-space: pre;
word-wrap: normal;
resize: none;
box-sizing: border-box;

Answer 2

我仍然在Safari 11中找到了這個，直到2018年3月。塊元素，例如<div> s，帶有white-space: pre; 和overflow: auto; Safari中的行為與Chrome，Firefox或Edge不同。 文本將包裝在容器內，而不是按照它應該滾動，如在Google論壇上的帖子中包含的圖像Neal所示。

解決方法是使用<pre>元素。 Safari處理得恰當，其他瀏覽器處理相同。

Answer 3

padding: 15px;
white-space: pre;
word-wrap: normal;
resize: none;
box-sizing: border-box;

它在為我工作.. Th

Answer 4

Safari錯誤地使overflow-wrap （也稱為word-wrap ）應用，即使pre white-space也是如此。 規范說它不應該首先禁止包裝，但Safari似乎忽略了這一點。

所以，要解決這個問題，請將white-space:pre與word-wrap:normal ，你應該很好。