Reputation: 132

css to word break the p tag containing a tag

I have html as below

<p>Read the <a target="_blank" class="highlight" href="www.url.com">'Design Network Hierarchy and Settings'</a> chapter in your version's user guide to learn how to create the structure and framework of your network including the physical topology, network settings, and device type profiles that you can apply to devices throughout your network.</p>

the a tag part of paragraph breaks into separate line and seen as below:

but I want it to be seen it as uniform paragraph.

Upvotes: 0

Answers (5)

Pons Purushothaman

Reputation: 2261

By default <a> tags are inline elements. Make sure you are not modifying the display property of <a>. You can inspect it in browser and find it easily. If you note something changing the display property, either remove it or overwrite it by applying display: inline

Upvotes: 0

Itay Gal

Reputation: 10834

Without any CSS it seems to work. Check your highlight class, it might define something that causes your link to be in a separate line. Probably display: block or display: inline-block.

Try adding display: inline, it should work

p{
 width: 300px;
}

<p>
  Read the
  <a target="_blank" class="highlight" href="www.url.com">'Design Network Hierarchy and Settings'</a> chapter in your version's user guide to learn how to create the structure and framework of your network including the physical topology, network settings,
  and device type profiles that you can apply to devices throughout your network.
</p>

Upvotes: 1