不同地设置文本装饰样式或在每一行上创建边框

时间:2010-12-03 13:00:12

标签: css border

我有一个非常具体的CSS问题。我试图让一段文字有一个边框底部:每行1px点缀,同时避免写出多余的标记。

显然p {border-bottom:1px dotted #000;}不起作用,因为它只会在p标签的最后一行设置一个边框底部。另一方面,文本修饰提供了正确的下划线,但不能设置点缀样式。

所以基本上我想知道是否有更好的方法来做这件事,而不是弄清楚什么时候有一条新线并添加跨度然后用边框底部设置样式并最终得到一个严重混乱的标记。

2 个答案:

答案 0 :(得分:0)

你可以尝试制作一个模拟虚线的背景,然后在你的段落上使用它。只需确保其高度与段落的line-height属性具有相同的值,以便正确匹配行。

例如,如果你想让你的线条成为一个1px空间的3px短划线,那么你就可以制作一个4像素宽×X像素的高图像(其中X当然是文本行的高度),并且只有它重复一遍。

希望这有帮助。

答案 1 :(得分:0)

由于border-bottom只适用于其选择器标识的元素,除了用<p>标签(或其他标签)将文本包装在每个<span>内之外,我无法看到另一种方法。 )。您可以通过在所有p标记内立即立即 来避免烦人的故障:

p > span:first-child {border-bottom:1px dotted #000;}

<p><span>this is a paragraph with a first-child span and a dotted underline<span></p>
<p>this is a paragraph with no first-child span <b>this is bold</b> <span>and this span is ignored<span></p>