Here is an example of my code
<ion-item> <h2>Description</h2> <p>The most versatile and widely used nut, it should be used with any low carbon bolt or screw that is heat-treated.</p> <ion-thumbnail item-right> <img src=""> </ion-thumbnail> </ion-item>
Heres how it looks now: http://i.imgur.com/t89oPvY.png
I want the text to wrap and span several lines (keeping the image in the same position, the text should just be a block on the left side like it is now but displaying the full paragraph)
1 Like
Use “Inspect element” of you browser’s dev tools to find out what causes the paragraph to be trunacted… Probably some CSS on the <p>
.
1 Like
Here is the css on p… i’m not sure how to fix the truncated text
.item-md p { overflow: inherit; margin: 0 0 2px; font-size: 1.4rem; line-height: normal; text-overflow: inherit; color: #666; }
I don’t think anything here makes the text truncate - you will have to investigate a bit more and turn stuff on and off to find out what actually causes this.
I did that when I was inspecting element and the text was still truncated. I cant figure out whats going on
I can’t see the image to see what exactly is going on, but I’d try adding the text-wrap
attribute to your ion-item
.
You must overwrite white-space
css property. Add to your paragraph white-space: wrap !important;
to overwrite.
1 Like
Hello, this is something you can do using class in the view(.html) and Scss(.scss) quite easily.
Like @rtalexk suggests, I think it’s just a simple scss issue:
- Create a class for your
paragraph in .html view (aka using p class=“text”)
- Make the CSS/SCSS class for it in .scss for the relevant page - aka
.text ( white-space: wrap !important; )
And it should roll like expected
1 Like
Thank you @rtalexk and @FrancoisIonic it worked but there is no property wrap but I tried normal and it worked!
.text ( white-space: normal !important; )