CODEWITHSUNDEEP
htmlcssionic-framework
Jack Nutkins
Jack Nutkins

Reputation: 1555

Dropping Text Over 2 Lines - Ionic 1

I'm struggling to drop the text shown in bold, black font in this plunker over 2 lines while preventing it infringing on the circular image on the left:

https://plnkr.co/mhVQPrVI52t2cmD5hAJW

Specifically the text that reads 'This is a very long event name that needs to go over 2 lines and stop before going under the image' for those of you with larger screens:

<h2 style="text-align: center; line-height: 2.5; font-weight: bold;">This is a very long event name that needs to go over 2 lines and stop before going under the image</h2>

I have tried various approaches so far, but each one messes up the remainder of the view. Do I need to re-structure the whole container to achieve this result?

EDIT: Updated the link.

Upvotes: 0

Views: 46

Answers (2)

toom501
toom501

Reputation: 354

Maybe I don't understand the question, but tried to change the css of the element 'a' and 'h2' to:

   <a class="item item-thumbnail-left" style="
                line-height: 2.5;
                border-bottom: solid 1px #F2EFEF;
                background-color: #F2EFEF;
                padding-left: 130px;
                " >

   <h2 style="text-align: center; 
               line-height: 2.5; 
               font-weight: bold; 
               white-space: pre-line;">This is a very long event name that needs to go over 2 lines and stop before going under the image</h2>

Upvotes: 1

Sneha Bharti
Sneha Bharti

Reputation: 226

This is happening because of the (anchor tag). I'm not sure what is it doing.

Upvotes: 1

Related Questions