make first line of paragraph a link with css or javascript(jquery)

Question

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?

I never tried this... but I have an idea - try to use a combination of :first-line, :before and :after — Sindhara, May 14 '12 at 12:26
It's doable, but not a good idea. If the text is a one-liner and wraps, you would have to figure out exactly how it's displayed on a users screen, accounting for browser / screen size, and a lot of trouble and code to do so, do something else instead! — adeneo, May 14 '12 at 12:26
There seems to be no definative "first line" concept here other than naturally wrapped text - Note that text in a `
` tag gets normalized with new lines in the actual text treated as whitespace. http://www.w3.org/TR/html401/struct/text.html — Mark Schultheiss, May 14 '12 at 12:36

score 0 · Answer 1 · answered May 14 '12 at 12:36

0

Text inside div would auto wrap depending on browser width. You could get reference to DOM element and use 'clientWidth' property to evaluate length of first line in the paragraph. Iterate over each word in the paragraph and evaluate for condition where clientWidth exceeds div width.

answered May 14 '12 at 12:36

ch4nd4n

4,110
2
21
43

How can I get size in pixel of word? I iterate over each word in paragraph but how can I transform each word wide in pixel for evaluate together if exceeds div width? – paganotti May 14 '12 at 12:41
Please refer to http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript – ch4nd4n May 14 '12 at 22:09

score 0 · Accepted Answer · answered May 14 '12 at 12:40

0

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.

answered May 14 '12 at 12:40

Cmorales

958
1
9
24

Yes, it is only for presentational purposes. You are right! I can display it as link and I can use :first-line for change appearance for only first line. I didn't think it! thanks! – paganotti May 14 '12 at 12:43

make first line of paragraph a link with css or javascript(jquery)

2 Answers2