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

Ionic Framework ionic-v3
1

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)

2

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

3

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

4

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.

5

I did that when I was inspecting element and the text was still truncated. I cant figure out whats going on :frowning:

6

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.

7

You must overwrite white-space css property. Add to your paragraph white-space: wrap !important; to overwrite.

8

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:

9

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