Ion-item with paragraph and picture: How to make it display full paragraph and not just partial


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:

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)


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>.


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 :frowning:


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.


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:

  1. Create a class for your

    paragraph in .html view (aka using p class=“text”)

  2. 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 :slight_smile:


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; )