如何在代码标记中添加左边距并换行长行

Question

我有这样的代码：

＆＃13;

＆＃13;

code {
  width: 520px;
  margin: 0 0 30px 200px;
}

＆＃13;

<code>
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/0.10.4/js/jquery.terminal.min.js"&gt;&lt;/script&gt;<br/>
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/0.10.4/css/jquery.terminal.min.css" rel="stylesheet"/&gt;
</code>

＆＃13;

＆＃13;

＆＃13;

但保证金仅添加到第一行，我尝试使用此css添加white-space: pre-wrap;（在css tricks上找到）：

 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+ */

但是我根本没有保证金。如何在代码标记中添加边距并在文字包装太大的情况下进行文本换行？

Answer 1

您可以尝试使用<code>调整display: block元素本身的显示方式，这会影响padding或margin等属性的应用：

code {
    display: block;
    width: 520px;
    margin: 0 0 30px 200px;
    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; 
}

示例

您可以see an interactive example of this in action here以及下面的内容：

Answer 2

似乎我需要添加包装器：

.code_wrapper {
  width: 520px;
  margin: 0 0 30px 200px;
  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+ */
}

<div class="code_wrapper">
<code>
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/0.10.4/js/jquery.terminal.min.js"&gt;&lt;/script&gt;<br/>
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/0.10.4/css/jquery.terminal.min.css" rel="stylesheet"/&gt;
</code>
</div>

Answer 3

您可以 inside a div like this:

<div class='outer_code' >
    <code>...</code>
</div>

Then in CSS

<div class='outer_code' >
    <code>...</code>
</div>