Ionic: Làm thế nào để hiển thị mục ion trên nhiều dòng?

Question

TÌNH HÌNH:

Tôi đang sử dụng Ionic để tạo ứng dụng.

Tôi cần hiển thị danh sách thông tin về một số người. Để đạt được điều đó, tôi đang sử dụng ionic list<ion-list> cùng với <ion-item> vì bố cục nó cung cấp chính xác là những gì tôi cần.

Vấn đề duy nhất là mỗi <ion-item> dường như bị buộc phải ở lại trên một dòng duy nhất, cắt văn bản thêm nó chứa, như nó trở thành hình ảnh:

BỘ LUẬT:

<ion-list> 
    <ion-item class="item"> Name: <b> {{ person.name }} </b> </ion-item> 
    <ion-item class="item"> Email: <b> {{ person.email }} </b> </ion-item> 
    <ion-item class="item"> Title: <b> {{ person.title }} </b> </ion-item> 
    <ion-item class="item"> Bio: <b> {{ person.bio }} </b> </ion-item> 
</ion-list> 

PLUNKER:

Đây là một plunker tái tạo tình hình. Bạn có thể thử thay đổi kích thước trình duyệt hoặc cửa sổ bên trong và bạn có thể xem cách mục ion cắt bỏ nội dung bổ sung.

http://plnkr.co/edit/Qx9fYRpiATK4lgj5g5Rk?p=preview

câu hỏi:

Làm thế nào tôi có thể hiển thị nội dung phụ trong một yếu tố <ion-item>?
Có thể hiển thị nội dung theo nhiều dòng không?

Answer 1

Lớp item-text-wrap sẽ giúp bạn ra ngoài, như thế này:

<ion-item class="item item-text-wrap"> 
    bio: <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </b> 
</ion-item> 

Answer 2

Bạn nên ghi đè CSS mặc định thêm vào cụ thể <ion-item>, ví dụ, thay đổi:

<ion-item class="item"> 
    bio: <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </b> 
</ion-item> 

Để:

<ion-item class="item" style="white-space: normal;"> 
    bio: <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </b> 
</ion-item> 

Answer 3

Đối với người dùng Ionic 2, bạn có thể sử dụng text-wrap thuộc tính như:

<ion-item text-wrap> 
    Multiline text that should wrap when it is too long to fit on one line in the item. 
</ion-item> 

Bạn cũng có thể xem Utility Attributes Documentation cho các thuộc tính có thể được thêm vào ion-item để chuyển đổi văn bản.