如何使用 CSS 将第二行设置为粗体

发布于 2025-01-10 03:20:54 字数 516 浏览 0 评论 0原文

我有一个包含一些内容的 div。我尝试使用此CSS在下一行中制作内容，但是如何使第二行变为粗体？

.description {
  white-space: pre-line !important;
}

<div class="description">
  Head of Department 
  Department: XYZ ABCD 
  [email protected]
</div>

原文

I have a div which has some contents. I tried this CSS to make content in next line, but how can make second line bold ?

.description {
  white-space: pre-line !important;
}

<div class="description">
  Head of Department 
  Department: XYZ ABCD 
  [email protected]
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

西瑶 2025-01-17 03:20:54

您无法使用纯 CSS 来做到这一点。但是这个任务可以通过一些Js作品来完成。

删除这个样式：

.description {
    white-space: pre-line !important;
}

然后添加这个 CSS 样式：

.singleLine{
    white-space: pre-line !important;
    display: block;
}

然后你可以编写这个 Js 代码：

var element =  document.getElementsByClassName("description")[0];
var text = element.innerHTML;
var multipleLinesText = text.split(/\r?\n/);
const theBoldLinesIndex = [1];
var spans = "";
multipleLinesText.map((value,index)=>{
    if(theBoldLinesIndex.some(i=>i==index)){
        spans += `<span class="singleLine"><b>${value}</b></span>`;
    }
    else{
        spans += `<span class="singleLine">${value}</span>`;
    }
})
        
element.innerHTML = spans;

考虑这两件事：

首先，制作这个 Js 部分在 Html 元素呈现后运行。

其次，在 theBoldLinesIndex 中插入要加粗的行索引，其中在你的情况下，是第二行（索引= 1).

You can not do that with pure CSS. But this task can be done by some Js works.

Remove this style:

.description {
    white-space: pre-line !important;
}

and next add this CSS style:

.singleLine{
    white-space: pre-line !important;
    display: block;
}

and then you can write this Js code :

var element =  document.getElementsByClassName("description")[0];
var text = element.innerHTML;
var multipleLinesText = text.split(/\r?\n/);
const theBoldLinesIndex = [1];
var spans = "";
multipleLinesText.map((value,index)=>{
    if(theBoldLinesIndex.some(i=>i==index)){
        spans += `<span class="singleLine"><b>${value}</b></span>`;
    }
    else{
        spans += `<span class="singleLine">${value}</span>`;
    }
})
        
element.innerHTML = spans;

Consider these two things:

First, make this Js part run after the Html elements have been rendered.

Second, in theBoldLinesIndex insert the lines index you want to be bold, which in your case, is second line (index = 1).

回复收藏 0 原文

~没有更多了~