CSS空白：沒有包裝，沒有水平滾動條和複製

我試圖實現三個目標結合時保持空白...CSS空白：沒有包裝，沒有水平滾動條和複製

確定我是否應該使用<code><pre>...</pre></code>或<pre><code>...</code></pre> ？
使代碼不包裝，不創建水平滾動條，並且不會溢出任何父元素。
確保當訪問者複製粘貼到任何（勝任）編輯器時保留的空白的代碼。

到目前爲止，我經歷過最多的運氣white-space: pre-wrap;但是我做不希望文本換行。如果他們有興趣，他們會複製粘貼它自己。雖然我不希望它包裝，但我也不希望它使元素溢出任何父元素之外，我不希望文本出現在它的直接父元素之外。

我會好與代碼本身水平滾動條（pre或code元素，取其）雖然我通常不喜歡。

以防萬一它是我有關不使用任何CSS框架或喜歡，我只是做一個基本的復位...

* {border: 0px; margin: 0px; outline: none; padding: 0px; }

我在Firefox中進行測試，然後瀏覽器，然後（實際）歌劇如果我有足夠的理智，那麼也許是IE。請思考一下？

來源

2014-06-16 John

2聽起來不可能。 – bjb568

你能舉一個你的意思嗎？這裏是一個簡單的演示http://jsfiddle.net/A2zhH/1/帶滾動條。您也可以隱藏溢出，使其沒有滾動條，但可複製的內容。這也是一個很好的閱讀：http://stackoverflow.com/questions/11742907/why-does-html5-recommend-putting-the-code-element-inside-pre –

1）很容易;由於代碼元素不能包含pre元素，因此您將代碼放在pre中。但是2）呢？對於太長的線路究竟應該發生什麼？ –

我得到了它使用以下努力的時間約99.8％的準確度...

XHTML

<pre><code>/* Code here. */</code></pre>

CSS

pre {white-space: pre; width: 75vmax;}

來源

2014-07-21 04:34:54 John

關於數字2和3：希望我沒有誤解你的問題 - 我明白你的目標是通過添加固定寬度和溢出來輕鬆工作：隱藏到CSS類。

1：它與<pre (outer)><code (inner)>所以......嘿。

http://jsfiddle.net/A2zhH/2/

僅供參考，border: gray;沒有做任何事情。你需要使用的格式border:1px gray solid;

來源

2014-06-16 16:59:13 Simone

目標1很簡單：code內pre是有效的，pre內code是沒有的。另一方面，pre是重要的。如果內容是計算機代碼，您可以在內部使用code作爲原則。

目標2本身就是自相矛盾的，除非你指的是減小字體大小以適應一切。更爲現實的是，關於它是好的對代碼塊水平滾動條語句，只使用

pre { width: 100%; overflow: auto }

這將導致水平滾動條顯示爲塊，而不是溢出的內容。

目標3是在使用普通空間時實現的。複製內容包含空格，粘貼後發生的情況取決於軟件。

來源

2014-06-16 19:15:28

CSS空白：沒有包裝，沒有水平滾動條和複製

回答

相關問題