标签: pre

<pre>标签会在自身上方增加差距？

我有以下HTML:

<h2>Embed Code</h2>
<pre>
  <code>
&lt;script type=&quot;text/javascript&quot;&gt;
  var something = 'else';
&lt;/script&gt;
  </code>
</pre>

Run Code Online (Sandbox Code Playgroud)

以下CSS:

h2 {
  background:#1e7ca2;
  font-weight: 100;
  font-size: 1.25em;
  padding: 10px 15px;
  margin: 0;
  color: white;
}
pre {
  margin:0;
  padding:0;
}
code {
  margin: 0;
  padding: 0 30px;
  display: block;
  background: #1d1f20;
  color: #839496;
  font-size: .85em;
  line-height: 1.6em;
}

Run Code Online (Sandbox Code Playgroud)

但是我h2和pre无法摆脱的元素之间存在差距.

你可以在这里看到问题:http://jsfiddle.net/gaby/k5V8U/

html css pre

Shp*_*ord

2014 01-31

16
推荐指数

2
解决办法

1万
查看次数

将换行符插入预标记(IE,Javascript)

在IE中,当我将文本插入<pre>标记时,新行被忽略:

<pre id="putItHere"></pre>

<script>
function putText() {
   document.getElementById("putItHere").innerHTML = "first line\nsecond line";
}
</script>

Run Code Online (Sandbox Code Playgroud)

使用\r\n而不是普通\n不起作用.

<br/> 确实有效但在FF中插入了一个额外的空白行,这对我来说是不可接受的.

javascript internet-explorer pre

Ita*_*man

2008 10-12

14
推荐指数

3
解决办法

2万
查看次数

如何使用jquery设置pre标签的文本

我正在使用预标记来保存一些具有回车符的原始格式化文本.首次显示页面时,它看起来很好.后来,我想刷新前期数据.我已经尝试了两种方法来使用jquery,一种使用.html(),另一种使用.text().两个sorta工作,但.html抛出回车和.text双重空格回车!我也试过.val()但是根本没用.这是代码(当然我一次只使用一个jquery行.)

<pre id="QComment">Initial Text</pre>

Run Code Online (Sandbox Code Playgroud)

在某个时候以后,

$('#QComment').text(databack);   // or
$('#QComment').html(databack);

Run Code Online (Sandbox Code Playgroud)

html jquery pre

Kno*_*nox

lucky-day

14
推荐指数

1
解决办法

3万
查看次数

HTML <pre>标记会导致换行符

我正在使用CSS(通过JQuery,但与此问题无关)突出显示HTML文件中的某些元素:我使用"pre"标签来分隔我文件中的逻辑元素,但我注意到"pre"标签似乎在元素之间留下了新的界限.

我可以使用CSS摆脱这些吗？

(或者我应该使用什么而不是"pre"标签？文本元素可能包含自己的HTML元素:不应该呈现,并且应该按字面显示为源代码:因此我最初选择"pre"标签)

这是我正在使用的HTML的一个示例:( 此示例需要http://docs.jquery.com/Downloading_jQuery)

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js">
</script>
</head>
<body>
<pre class="error">
This is an error line.
    stack.trace.blah.blah
    more.blah.blah
    yadda.yadda.blah</pre>
<pre class="ok">
this is not an error line.it contains html
&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;hello&lt;/body&gt;&lt;/html&gt;</pre>
<pre class="error">
This is an error line.
    stack.trace.blah.blah
    more.blah.blah
    yadda.yadda.blah</pre>
<pre class="ok">

<script type="text/javascript">
    $("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
</script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我正在使用Firefox 3.6.12.这就是上面的代码导致的结果: 替代文字

这是我想要的模拟输出(切换到黄色,只是因为我使用了我的vim编辑器,假装它是红色的!)

替代文字

解:

是对所有PRE标签使用'display:inline'.(之前我只是将'display:inline'应用于上面示例中的'error'标记,并且忘记对'ok'预标签执行相同操作.

html css newline line-breaks pre

mon*_*nny

2010 11-21

13
推荐指数

2
解决办法

3万
查看次数

如何在HTML文档中显示html标签？

我只是想创造这样的东西:

<strong>blah blah</strong>

Run Code Online (Sandbox Code Playgroud)

我一直试图这样做很长一段时间虽然由于某种原因,每当我把代码和预标记他们没有做他们应该做的事情.他们没有格式化内容 - 我没有看到任何格式,虽然标签没有出现.例如,我写道:

<pre><b>abc</b></pre>

Run Code Online (Sandbox Code Playgroud)

abc看起来不是大胆的,但我看不到标签本身.我怎样才能做到这一点？我不想使用像&fdaf这样的实体; 因为我没有写入传入的文本

html pre

Ari*_*iel

2017 04-24

13
推荐指数

5
解决办法

3万
查看次数

在不同的Web浏览器中设置PRE标签宽度

有一种方法可以在Firefox和Opera中设置PRE标签宽度,但是在IE或Chrome中没有一种众所周知的方法可以做到这一点,因此PRE标签中的硬标签代码会受到影响.

pre {
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
    -moz-tab-size: 1.5em;
    -o-tab-size: 1.5em;

    margin: 1em 0 0 0;
    padding: 1em 1em 1em 1em;
    width: 65%;
}

Run Code Online (Sandbox Code Playgroud)

css tabs pre width

mca*_*dre

lucky-day

10
推荐指数

2
解决办法

3448
查看次数

在<pre>标记内打破文本行

我在chrome中有我的代码片段的屏幕截图:

在此输入图像描述

在Firefox中:

在此输入图像描述

我的问题是,如何在firefox中使用与chrome相同的效果？代码段部分位于预标记内.非常感谢任何帮助!:)

html css jquery pre

Emk*_*key

lucky-day

10
推荐指数

1
解决办法

5592
查看次数

Bootstrap 和 Pandoc 的代码块格式问题

我在 Pandoc 降价文件中有一个代码块，指定为：

```python
for x in range(10):
  print('id is', x)
```

Run Code Online (Sandbox Code Playgroud)

当我使用命令时

pandoc example.md -s -o example.html

我在网页中得到以下输出：

但是，当我使用使用 Bootstrap CSS 生成 HTML 的自定义 html 模板时，代码块中的缩进是错误的。命令

pandoc example.md --template=custom.html -s -o example2.html

在网页中产生以下输出：

请注意第二个示例中的缩进是如何过大的。这仅在使用 Bootstrap 设置代码块样式时发生。缩进问题不会出现在第一行，只会出现在代码块中的后续行。

我用来生成 HTML 的模板是：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Example Pandoc HTML</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    $if(quotes)$
      <style type="text/css">q { quotes: "“" "”" "‘" "’"; }</style>
    $endif$

    $if(highlighting-css)$
      <style type="text/css">$highlighting-css$</style>
    $endif$

    $if(math)$ …

Run Code Online (Sandbox Code Playgroud)

html markdown pre pandoc twitter-bootstrap

wig*_*ing

2017 03-15

9
推荐指数

1
解决办法

1294
查看次数

HTML证明text-align与<pre>标签

我在带有格式和固定宽度的段落中的text-align"justify"有问题,因为我希望HTML中的段落文本看起来完全合理(就像MS Word文件一样).但是,这不会发生.我需要修改什么来实现它？

     <pre style="color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: medium; width: 500px; text-align: justify;"> 

I have a problem with the text-align "justify" inside a paragraph with format and fixed width, because I want the paragraph text in HTML to appear totally justified (like it would happen with a MS Word file). However, this does not happen. What I need to modify to achieve it?

        </pre>

Run Code Online (Sandbox Code Playgroud)

编辑:如果我用<pre>标签替换<p>标签,我的代码工作正常.有人可以解释一下为什么吗？也许我使用了错误的<pre>标签.

html pre fixed-width text-justify

jul*_*rez

2012 01-19

8
推荐指数

2
解决办法

2万
查看次数