Html 如何在不更改剩余段落格式的情况下将 <p> 标记中的文本隔离为粗体

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14127311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 04:41:40  来源:igfitidea点击:

How to isolate text in a <p> tag to bold without changing the format of remaining paragraph

htmlcss

提问by Austin Davis

I have three sections of text in there own <p></p>and I need to bold just a couple of words in each paragraph. So my question is how would I properly bold "CLX Exchange Accommodators, Inc." using CSS without having the text that follows appear below the bold text. The reason I'm asking this is because whenever I try to isolate the text I want to bold in another div or p tag the remaining text appears below the bolded text.

我有自己的三段文字,<p></p>我需要在每段中加粗几个词。所以我的问题是如何正确加粗“CLX Exchange Accommodators, Inc.” 使用 CSS 而不让后面的文本出现在粗体文本下方。我问这个的原因是因为每当我尝试隔离我想在另一个 div 或 p 标记中加粗的文本时,剩余的文本就会出现在加粗文本的下方。

Here is my html

这是我的 html

<div id="content">
   <p class="copy"> CLX Exchange Accommodators, Inc. have been proudly serving real estate investors nationwide since 1991.</p>

</div>
<!--End of content-->

Here is my current project on codepen if it helps http://codepen.io/Austin-Davis/pen/IpDLu.

这是我目前关于 codepen 的项目,如果它有帮助的话http://codepen.io/Austin-Davis/pen/IpDLu

回答by jamesplease

To bold some text in a paragraph you could use the <b>, <strong>tag or a <span>with styling set. These options would look like this:

要将段落中的某些文本加粗,您可以使用<b>,<strong>标签或 a <span>with 样式集。这些选项如下所示:

I want to <b>bold</b> a word.

This word is <strong>bolded</strong>.

The following word is <span style="font-weight: bold;">bolded</span>.

Note that your choice of tag has semanticimplications. With the development of HTML5 there is a movement to make the tags that you're using carry meaning beyond just having them there for display purposes. You can read a bit about a few of the relevant meanings here.

请注意,您选择的标签具有语义含义。随着 HTML5 的发展,有一种趋势是让您使用的标签具有意义,而不仅仅是将它们放在那里用于显示目的。您可以在此处阅读一些相关含义。

Though I used inline styling in my code snippet above to style that span, I would probably use a stylesheet to set the style on an actual webpage. It's good practice to separate your HTML markup and the styling.

尽管我在上面的代码片段中使用了内联样式来设置跨度的样式,但我可能会使用样式表来设置实际网页上的样式。将 HTML 标记和样式分开是一种很好的做法。

Oh, and one last thing: the reason that placing your text in a p or div tag moves it to the next line is because those elements are, by default, set to display: block;. If you want to use one of those tags (which you shouldn't for semantic reasons), you could set them to display: inline;or display: inline-block;. Read all about the display property here.

哦,还有最后一件事:将文本放在 ap 或 div 标签中的原因是因为这些元素默认设置为display: block;. 如果您想使用这些标签之一(出于语义原因您不应该这样做),您可以将它们设置为display: inline;display: inline-block;在此处阅读有关 display 属性的所有信息。

回答by Nick Pearce

This can be achieved with a STRONG tag but I prefer to keep it flexible by using a SPAN. You can set the style for the SPAN (or for that matter the STRONG) in CSS.

这可以通过 STRONG 标签来实现,但我更喜欢使用 SPAN 来保持它的灵活性。您可以在 CSS 中设置 SPAN(或就此而言是 STRONG)的样式。

<style>
#content p.copy span {font-weight: bold;}
</style>
<div id="content">
<p class="copy"> <span>CLX Exchange Accommodators, Inc.</span> have been proudly serving real estate investors nationwide since 1991.</p>

</div>
<!--End of content-->

回答by Releto

 <p class= "copy"> <b>CLX Exchange Accommodators, Inc.</b> have been proudly serving real estate investors nationwide since 1991.</p>

.copy b 
{
  font-weight:bold;
}

Try this.

尝试这个。

回答by Travis Payton

Is there a reason you want to do it in CSS? The simplest way would be to put <b> </b>tags around the CLX Exchange Accommodators, Inc.

你有什么理由想在 CSS 中做到这一点吗?最简单的方法是<b> </b>在 CLX Exchange Accommodators, Inc. 周围放置标签。

<div id="content">
   <p class="copy"> <b>CLX Exchange Accommodators, Inc.</b> have been proudly serving real estate investors nationwide since 1991.</p>

</div>
<!--End of content-->

You could also use <strong> </strong>tags, however it might also italicize the text in some older browsers

您也可以使用<strong> </strong>标签,但它也可能在某些旧浏览器中将文本斜体