Search code examples
javascripthtmlfunctionparagraphcontent-length

How do I make an element in html not an entire line long

So what I'm trying to make is a paragraph in HTML and then when you click on it it would do a certain action, for example:

<p id='hello'>Hello</p>

<script>
hello.onclick = function() {
 console.log("clicked!");
}
</script>

the only problem is that when I click next to the text, it still detects it as a click, I want the click ratio to be the length of the paragraph's text. What's the best way I could do this?

Solution

  • I would suggest you to use inline element instead of p like below -

    <span id='hello'>Hello</span>

    Because p is block element and no matter where your contents gets over in the line it will takes the space of whole line.

    For more in details refer this link