我的网站将有一些内联代码("当使用foo()函数时……")还有一些片段.它们往往是XML,并且有很长的行,我更喜欢用浏览器包装(也就是说,我不想使用<pre>).我还想在块代码段上添加CSS格式.

看起来我不能同时使用<code>,因为如果我给它加上CSS挡路属性(带有display: block;),它会打断内联代码段.

我很好奇人们做什么.块使用<code>,内联使用<samp>?使用<code><blockquote>或类似的东西?

我希望让实际的HTML尽可能简单,避免类,因为其他用户将维护它.

推荐答案

我完全忽略了一件事:<pre>的非包装行为可以通过CSS来控制.所以这给出了我想要的确切结果:

code { 
    background: hsl(220, 80%, 90%); 
}

pre {
    white-space: pre-wrap;
    background: hsl(30,80%,90%);
}
Here's an example demonstrating the <code>&lt;code&gt;</code> tag.

<pre>
Here's a very long pre-formatted formatted using the &lt;pre&gt; tag. Notice how it wraps?  It goes on and on and on and on and on and on and on and on and on and on...
</pre>

http://jsfiddle.net/9mCN7/

Html相关问答推荐

html中背景色的全单元格R中的Rmarkdown表

Blazor中有1像素高行的表格

在浮动元素旁边垂直居中

未显示新组件的视图

浏览器是在调整大小还是在全屏上交换视频源?

HTML+CSS+JS动态选中文本高亮 colored颜色 变化

是否可以部分列出一个HTML有序列表

我无法使用背景图像css,因为我在VS代码中将照片放在不同的文件夹中

在一行中对齐文本和图标

图像不在HTML文件中显示

这<;td&>如何溢出<;表>;?

在悬停时应用文本装饰

如何将CSS滤镜仅应用于背景图像

视频重新加载而不是在 Swift 中暂停 WKWebView

调整 Rmarkdown 输出的 html_document 的标题和副标题之间的间距

可以通过悬停时的自定义区域更改文本属性吗?

为什么 CSS 网格超出了父级?

如何使Bootstrap 5卡可点击

有没有办法在 Flutter 中创建这个浮动标签表单?

变换元素以适应高度(Angular,SCSS)