CODEWITHSUNDEEP
javascripthtmlionic-framework
robloxGamer3029
robloxGamer3029

Reputation: 55

how to wrap text in ionic?

My code is working with several ion-item elements. The problem arises when I run the code, the ion-item tag is causing the text in the card to be chopped off and trailed with a "..." at the end.

Here's something that it looks like.

.card {
  width: 130px;
  height: 130px;
  background-color: black;
  margin: 0px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: 0px 0px 5px black;
  display: inline-block;
}
<head>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
</head>

<body>
  <ion-item>
    <ion-card class="card">
      <div id="labels">
        <ion-label>
          This is a paragraph. It is meant to demonstrate how ionic doesn't wrap the text when it's too long.
        </ion-label>
      </div>

    </ion-card>
  </ion-item>

</body>

Upvotes: 1

Views: 6695

Answers (4)

Thameem Abdul Latheef
Thameem Abdul Latheef

Reputation: 1

  1. create a div inside ion-label.
  2. place your text inside div that created.
  3. place the div class as ion-text-wrap for example

This will wrap your text

change your code as follows

<ion-item>
<ion-card class="card">
    <ion-label>
      <div id="labels" class="ion-text-wrap">
      This is a paragraph. It is meant to demonstrate how ionic doesn't wrap the text when it's too long.
      </div>
    </ion-label>
</ion-card>

Upvotes: 0

Taylor Rahul
Taylor Rahul

Reputation: 729

Ionic itself has a css class to wrap text, nowrap or justify. you can use this as per your requirement with your class. no need to manage this in your css class.

class="ion-text-wrap"

Please check the below link for more details

https://ionicframework.com/docs/layout/css-utilities

Upvotes: 2

Shristi
Shristi

Reputation: 7

Please add this code in your global.scss file if you want to wrap the label text in all of your pages. If it is for a single page, add this code in the respective scss file.

ion-label {
white-space: normal !important;
}

Upvotes: 0

Tayyab mehar
Tayyab mehar

Reputation: 621

1- Remove display: inline-block; from the style. 2- Bring div tag inside ion-label tag. 3- break your string in your code to display it properly.

Upvotes: 0

Related Questions