Highlighted

Can someone check this code please?

Explorer ,
Jan 28, 2018

Copy link to clipboard

Copied

https://exetragoudi.000webhostapp.com/sample.html

I can't figure out why chromium based browsers (Chrome, Opera) wrap the text of the first line, while IE, Edge and Firefox don't...

This is partially right.

The real problem was the ::first-line pseudo-element. I removed it and then applied <strong> to individual <a> tags.

Thanks.

Views

187

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Can someone check this code please?

Explorer ,
Jan 28, 2018

Copy link to clipboard

Copied

https://exetragoudi.000webhostapp.com/sample.html

I can't figure out why chromium based browsers (Chrome, Opera) wrap the text of the first line, while IE, Edge and Firefox don't...

This is partially right.

The real problem was the ::first-line pseudo-element. I removed it and then applied <strong> to individual <a> tags.

Thanks.

Views

188

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 28, 2018 0
Adobe Community Professional ,
Jan 28, 2018

Copy link to clipboard

Copied

I'm sorry, I cannot figure out why without spending a lot of time. I do have a solution as follows

1. change

.dscinf p::first-line {

  font-weight: bold;

}

to

.dscinf a:first-child {

  font-weight: bold;

}

2. add the highlighted line

.dscinf a {

  color: #039;

  text-decoration: none;

  display: block;

}

3. move the paragraph element to cover the last two lines only

<div class="dscinf"><a href="#">THIS IS A (INTENTIONALLY EXTENDED) SAMPLE TITLE OF THE LP</a>

  <a href="#">Artist name</a>

  <p>Jun 2000<br>

  Mercury 542558</p>

</div>


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 28, 2018 1
Explorer ,
Jan 28, 2018

Copy link to clipboard

Copied

Well, I'll try it. Thanks.

Meanwhile, I found out that I can only remove the second left-float style (.dscinf) to fix it.

It seems that Chrome doesn't want two left-floats side by side.

Thanks again.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 28, 2018 0
Enthusiast ,
Jan 28, 2018

Copy link to clipboard

Copied

You could assign a different class for each "a" or use the span tag for individual parts of text with different css styles.

Regards

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 28, 2018 1
Explorer ,
Jan 28, 2018

Copy link to clipboard

Copied

This is partially right.

The real problem was the ::first-line pseudo-element. I removed it and then applied <strong> to individual <a> tags.

Thanks.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 28, 2018 0