Home/ Questions/Q 7930707
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T20:30:36+00:00

I have this snippet: <div> <p class=one> a long text that wrap in multiple

  • 0

I have this snippet: 

    <div>
       <p class="one">
          a long text that wrap in multiple rows. Lorem ipsum dolor sit amet, 
          consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
          ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
          obcaecat cupiditat non proident, sunt in 
          culpa qui officia deserunt mollit anim id est laborum.
       </p>
    </div>

Long text is wrapped in div.Div tag is 565px wide. So, text in div is visible multiple row (line) because it wrap text.

I want that only first line become an hyperlink.

So, I would want obtain this:

    <div>
       <p class="one">
          <a href="#">a long text that wrap in multiple rows. Lorem ipsum dolor sit amet, </a>
          consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
          ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
          obcaecat cupiditat non proident, sunt in 
          culpa qui officia deserunt mollit anim id est laborum.
       </p>
    </div>

UPDATE
I’m testing this:

<html>
<head>
<style type="text/css">
a:first-line
{
    color:yellow;
}
</style>
</head>

<body>
<h1>WWF's Mission Statement</h1>
<a href="#">a long text that wrap in multiple rows. Lorem ipsum dolor sit amet,
              consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
              ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
              obcaecat cupiditat non proident, sunt in 
              culpa qui officia deserunt mollit anim id est laborum.</a>
</body>
</html>

from http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_firstline

But it seems not work. Why pseudo-selector first-line doesn’t work with hyperlink tag?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since I guess you want to get that only for presentational purposes, you can wrap all the text in a link and give only the first line link appearance with CSS. You can’t convert something into a link with CSS.

    • 0