文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在代码标记中添加左边距和换行

问如何在代码标记中添加左边距和换行
EN

Stack Overflow用户

提问于 2016-05-03 16:45:40

回答 2查看 308关注 0票数 0

我有这样的代码：

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

<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>

但是边距只添加到第一行，我尝试用这个css添加white-space: pre-wrap; (在css技巧上找到)：

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

但我根本就没有保证金了。如果代码标签太大，我如何为代码标签添加页边距，并使文本换行？

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-05-03 16:50:47

您可以尝试通过使用<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; 
}

示例

您可以使用请参阅此处的交互示例。和下面的样子：

票数 1

Stack Overflow用户

发布于 2016-05-03 16:50:14

看来我需要添加包装器：

.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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37009810

复制

相似问题

问如何在代码标记中添加左边距和换行
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在代码标记中添加左边距和换行EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在代码标记中添加左边距和换行
EN