Question

有没有办法在<br>不使用::first-line之前编辑一行的CSS？

具体来说，在我的代码中，我希望第一个短语（＆＃34;达到理想的客户＆＃34;）加粗;但是，在某个屏幕尺寸下，线条的一部分会移动到下一条线，因此::first-line指示似乎没有做到这一点。

（遗憾的是，由于我使用的是第三方平台，我无法更改HTML）

在这里小提琴：https://jsfiddle.net/yuyutomi/rsnod0zg/

＆＃13;

.desc-wrapper p:first-line {
  font-weight: 800;
}
.desc-wrapper p {
  font-size: 50px;
  font-weight: 100;
}

＆＃13;

<div class="desc-wrapper" data-content-field="description">
  <p>I would always like to be bold
    <br>I would like to be normal font-weight</p>
  <p>I'm a placeholder</p>
</div>

＆＃13;

Answer 1

这是一种类似于Guitaro的方式，但没有Jquery

var selector = document.querySelectorAll(".desc-wrapper p");

for (let i = 0; i < selector.length; i++) {
  var getContent = selector[i].innerHTML;
  var getContentSplit = getContent.split("<br>");
  if (!(getContentSplit.length <= 1)) {
    selector[i].innerHTML = "<b>" + getContentSplit[0] + "</b>";
    for (let j = 1; j < getContentSplit.length; j++) {
      selector[i].innerHTML += "<br>" + getContentSplit[j];
    }
  }
}

.desc-wrapper p {
  font-size: 46px;
  letter-spacing: 0.5px !important;
  font-weight: 100;
  text-transform: none;
  line-height: 58px;
}

<div class="desc-wrapper" data-content-field="description">
  <p>I would always like to be bold
    <br>I would like to be normal font-weight</p>
  <p>I'm a placeholder</p>
  <p>I would always like to be bold
    <br>I would like to be normal font-weight
    <br>I would like to be normal font-weight</p>
</div>

Answer 2

不是用css。但是你可以使用简单的Jquery代码。

这是你example的小提琴。

$(document).ready(function() {
var getContent=$(".desc-wrapper").html();
var newString=getContent.replace('Reach your ideal clients','<span class="YourClass">Reach your ideal clients</span>');
$(".desc-wrapper").html(newString);
});

.YourClass {
  font-weight: 800;
}

.desc-wrapper p {
  font-size: 46px;
  letter-spacing: 0.5px !important;
  font-weight: 100; 
  text-transform: none;
  line-height: 58px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desc-wrapper" data-content-field="description">
  <p> Reach your ideal clients<br>Shape your dream practice </p>
  <p>Do more of what you love</p>
</div>

在编辑之前编辑css但不使用:: first-line

2 个答案: