我想创建一个类似于标签的文本样式。看这里：
我几乎可以只使用：http: //jsfiddle.net/STApE/
p{display: inline; background: yellow;}
但是，我想添加一些填充。当我这样做时，事情就会走下坡路。如果我添加边框也会发生同样的情况：http: //jsfiddle.net/JN72d/
关于实现这种效果的简单方法的任何想法？
问问题
9733 次
8 回答
6
我可以通过稍微修改你的 DOM 结构来实现它：
于 2011-02-04T15:00:55.067 回答
2
用跨度包裹每一行。将跨度设置为块级。将背景和填充应用于跨度。
于 2011-02-04T14:58:03.237 回答
1
而不是<p>你可以使用<span>and float：
<style type="text/css">
span {
float: left;
background: yellow;
padding: 3px;
text-transform: uppercase;
clear: left;
}
</style>
<span>highlighting the text</span>
<span>like this</span>
<span>using just css</span>
<span>is harder</span>
<span>than it looks</span>
见例子。
于 2011-02-04T15:05:57.770 回答
1
于 2011-02-04T15:14:01.020 回答
0
像这样将跨度添加到您的段落中：
<p class="p1">
<span>Highlighting the text</span><br/>
<span>like this</span><br />
<span>using just CSS</span><br />
<span>is as easy</span><br />
<span>as it looks.</span>
</p>
并添加以下 CSS：
p.p1{display: inline; background: yellow;}
span {padding: 5px; background: yellow; display: inline-block;}
注意display: inline-block属性。我分叉了你的代码：http: //jsfiddle.net/eliekhoury/JN72d/27/
于 2011-02-04T15:05:39.557 回答
0
可以用<pre>吗？将其格式化为您想要的格式
于 2011-02-04T14:59:45.190 回答
0
这是一项艰巨的任务...
但是 :) 我为此找到了一篇很棒的文章！
使用以下解决方案，您可以在Dinamic text不使用每行换行的情况下突出显示。
带有演示的文章： http: //css-tricks.com/multi-line-padded-text/
享受！）
于 2014-04-30T12:22:02.230 回答
0
我认为您可以通过更改display:inline为display:inline-block. 这有一些浏览兼容性问题（取决于您的目标集）：
于 2011-02-04T14:58:01.113 回答