Question

我正在尝试将一个底部边框添加到包含在div中的标题，但它会影响整个块。

<div class="title">I'm a title</div>

和我的CSS

.title {border-bottom: 2px solid #000; padding-bottom: 3px;}

将此边框应用于文本的最佳方法是什么？

在文本周围包裹一个范围是理想的。但我无法访问HTML。

<div class="title">
<span class="border">I'm a title</span>
</div>

如何使用Jquery用span包装文本。

我正在尝试

$(".title").wrap('<span></span>');

或者是否有其他方法可以添加此CSS？

由于

Answer 1

.title {border-bottom: 2px solid #000; padding-bottom: 3px; display: inline;}

Answer 2

根据您想要获得的花哨程度，您可以通过设置text-decoration:underline（MDN）

来获得您所想要的效果

这本身并不是真正的边框，但如果你无法修改html，这可能是你唯一的选择

Answer 3

“......我如何使用Jquery用span填充文本。”

这应该回答你的问题：

<html>
<head runat="server">
    <title></title>

    <style>
        .border {border-bottom: 2px solid #000; padding-bottom: 3px;}
    </style>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.title').each(function(index) { 
                $(this).html("<span class='border'>" + $(this).html() + "</span>");
            });
        });
    </script>

</head>
<body runat="server">
    <div class="title" style="text-align: center">I'm a title</div>
</body>
</html>

将div扩展到div中的文本

3 个答案: