如何在 ion-item 中对长字符串进行自动换行

中对长字符串进行自动换行

关注

发信

关注(28)粉丝(399)

本文介绍了如何在 ion-item 中对长字符串进行自动换行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

IONIC 在 ion-item 中 word-wrap 有两个问题:1. 字符串会被末尾的点截断，如何显示没有点的完整内容?2. Firefox 中自动换行和响应不工作(Chrome 可以)，如何在 Firefox 中解决此问题?


<div class="col"><div class="item item-body"><ion-item class="wrap" style="word-wrap: break-word; word-break: break-all;">#fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion</ion-item>

任何帮助将不胜感激.最好的祝福.这是显示问题的完整 HTMLcodepen

解决方案

对于 ionic 1:

将 item-text-wrap class 添加到项目.

一些长字符串</ion-item>

对于离子 2:

向项目添加text-wrap 属性.

一些长字符串</ion-item>

IONIC has two problems about word-wrap in ion-item:1. String would be truncated by the dots appended at the end, how to show full content without dots ?2. Automatic line breaks and responsive are not working in Firefox (Chrome is ok), how to fix this problem in Firefox ?

<div class="row responsive-sm">
<div class="col">
    <div class="item item-body">
        <ion-item class="wrap" style="word-wrap: break-word; word-break: break-all;">
        #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion
        </ion-item>
    </div>
</div>

Any help would be much appreciated. Best Regards.Here is Full HTML to show the problemcodepen

解决方案

For ionic 1:

Add item-text-wrap class to item.

<ion-item class="item-text-wrap">
  some long string
</ion-item>

For ionic 2:

Add text-wrap attribute to item.

<ion-item text-wrap>
  some long string
</ion-item>

这篇关于如何在 ion-item 中对长字符串进行自动换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-30 07:05