这是我的代码:
<div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div>
当前的页面效果如下:
http://i48.tinypic.com/2dqvo1i.png
有没有一种方法可以在突出显示的文本两侧添加填充? 对SPAN进行常规填充不起作用,因为它只考虑句子的开头和结尾,而不是每一行。
有任何想法吗? CSS3代码可以。
这是我的代码:
<div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div>
当前的页面效果如下:
http://i48.tinypic.com/2dqvo1i.png
有没有一种方法可以在突出显示的文本两侧添加填充? 对SPAN进行常规填充不起作用,因为它只考虑句子的开头和结尾,而不是每一行。
有任何想法吗? CSS3代码可以。
在经历一些困难后,我找到了一种不会出现怪异问题的解决方案,并且对于旧版浏览器有一个不错的回退方案——给文本行添加两个CSS3阴影:
span {
background:#ff0;color:#000;
box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
}
white-space: pre-wrap;
虽然不是一个完美的解决方案,但可以在换行符之前添加一些空格。
一个简单的方法是将以下内容添加到您的样式部分定义中:
span {
padding-left: 8px;
padding-right: 8px;
}
inline-block
。它在IE8之前的版本中无法正常工作(虽然有一些解决方法),但其他流行的浏览器都应该可以正常工作:p span {
display: inline-block;
padding: 0 2em;
}
终于找到了走出困境的方法。对我有用。使用左侧的按钮就像这样。
<p>
<button class="blankspace">
</button>
<span>
</span>
</p>
并将其样式化为CSS
.blankspace {
background: none;
opacity: 0.0;
outline:0;
text-decoration: none;
width: 2%;
height: 80%;
margin:0 auto;
float:left;
text-align:right;
padding:0%;
font-size:2px;
}
不要像建议的那样添加两个CSS3阴影,这里有一个更简单的答案:
使用display:block
<span>
默认是display:inline
,所以你添加的边框和填充实际上并没有影响它的大小。因此只有第一行受到影响。
在上使用display:block
,<span>
现在就像<p>
和<div>
一样工作。
这里有一个很好的解释: http://quirksmode.org/css/css2/display.html