相关疑难解决方法(0)

使用CSS使用填充为文本创建高亮效果

我正在尝试使用换行符创建突出显示的文本效果.

例:

高亮文字效果

我无法弄清楚如何在文本中添加填充.这是包含文本的span元素的CSS:

background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 24px;
padding-left: 5px;
Run Code Online (Sandbox Code Playgroud)

添加填充时,它只在文本开头和结尾添加填充,如下所示:

添加了填充

CSS:

background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 3em;
padding: 10px;
Run Code Online (Sandbox Code Playgroud)

有没有人知道如何实现这一目标?

css css3

15
推荐指数
4
解决办法
3万
查看次数

第一个词选择器

如何选择div中的第一个单词?

我需要能够在第一个单词之后插入换行符,或者将其换行到span标记中.我需要在具有相同类的页面上为多个div执行此操作.

jquery jquery-selectors

13
推荐指数
2
解决办法
4万
查看次数

跨度背景颜色和填充问题

我有一个我想要实现的设计,涉及标题文本以其自己的背景颜色出现,填充10px,在图像上,例如:

http://i.stack.imgur.com/E7EpS.png

这张图中的第一个例子效果很好,很简单:

.greenbox {width:520px; height:261px; position:relative;}
.greenbox span { padding:0 10px; background:#000; position:absolute; left:0; bottom:40px; }
Run Code Online (Sandbox Code Playgroud)

当文本溢出到另一行时出现麻烦,然后span元素填充不会影响换行符上的文本,它呈现如下:

http://i.stack.imgur.com/pY18f.png

任何人都知道一个替代品,或者他们如何设置这个设计,以便背景颜色和填充是一致的?

提前致谢

编辑:我已经简化了代码,使其简洁,但错过了一个重要的部分.实际上它是这样的:

.greenbox {width:520px; height:261px; position:relative;}
.greenbox a {position:absolute; left:0; bottom:40px; }
.greenbox span { padding:0 10px; background:#000; }
Run Code Online (Sandbox Code Playgroud)

用html作为:

<div class="greenbox">

    <a href="link"><span>The Title Goes Here</span></a>

</div>
Run Code Online (Sandbox Code Playgroud)

因此,跨度保持内联,包裹在绝对位置锚中.

css

12
推荐指数
1
解决办法
2万
查看次数

标签 统计

css ×2

css3 ×1

jquery ×1

jquery-selectors ×1