CODEWITHSUNDEEP
htmlcssionic-frameworkionic4
lei lei
lei lei

Reputation: 1829

How to automatically change to new line but not hide the contents for long text?

I am building an ionic app, for long text, the part of contents are hidden as ... and cannot seen by user. Is it possible to make long text automatically change to new line and show all contents?

,

 <ion-avatar item-start >
    <img src="assets/img/A_icon.png" style="..."/>
  </ion-avatar>
  <h2>Start</h2>
  <p>{{this.startTime}}</p>
  <p>{{this.startAddress}}</p>

Upvotes: 0

Views: 148

Answers (2)

rtpHarry
rtpHarry

Reputation: 13135

You haven't clarified but this looks like Ionic 4 code.

The correct way to control this is to use the built in ion-text-wrap class:

CSS Utilities - Ionic Documentation

Example:

  <ion-avatar item-start >
    <img src="assets/img/A_icon.png" style="..."/>
  </ion-avatar>
  <h2>Start</h2>
  <p class="ion-text-wrap">{{this.startTime}}</p>
  <p class="ion-text-wrap">{{this.startAddress}}</p>

Upvotes: 2

Nidhin Joseph
Nidhin Joseph

Reputation: 10237

You need to remove the ellipse and add word-break: break-all;. See the example below.

p {
  width: 150px;
  border: 1px solid #a8a8a8;
}

.break {
  word-break: break-all;
}

.ellipse {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<h2>break</h2>
<p class="break">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<h2>ellipse...</h2>
<p class="ellipse">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

Upvotes: 1

Related Questions