Question

HTML

<div class="test">Bold Text. Normal Text</div>

预期产出：

粗体文字。普通文字

我知道要为某些文字添加<b>。但这里的条件不是编辑HTML页面。通过使用CSS或jquery需要将某些文本设置为粗体。

提前致谢...

Answer 1

<div class="test">Bold Text. Normal Text</div>

.test {
    font-size:0;
 }

.test:before {
    font-size: 12px;
    content: "Bold Text. ";
    font-weight: bolder;
}

.test:after {
    font-size: 12px;
    content: "Normal Text";
}

http://jsfiddle.net/td92r3jz/

小提琴。

Answer 2

JQuery的。获取文本，按点分割，用<span>换行并放回去。将CSS应用到第一个<span>。（运行代码段）

var t = $('.test').html().split('.');
var res = '<span>' + t[0] + '.</span><span>' + t[1] + '</span>';

$('.test').html(res);

.test>span:first-child {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Bold Text. Normal Text</div>

Answer 3

您可以使用css隐藏原始div中的文本，并使用：before和：after css-selector再次使用css

添加文本

div {
    line-height:1000px;
    overflow:hidden;
    height:30px;
}

div:after {
    content:"bold text";
    position:absolute;
    font-weight: bold;
}

div:before {
    content:"normal text";
    position:absolute;
    font-weight: normal;
}

如何在html中设置font-weight粗体？

3 个答案: