javascript - ionic 列表项文本溢出未调整列表项的高度

Question

代码:

<ion-header-bar align-title="center" class="bar-positive">
    <div class="button button-clear" ng-click="closeGlobalTaskModal()">Cancel</div>
    <h1 class="title">Add Global Task</h1>
    <div class="button button-clear" ng-click="saveAndCloseGlobalTaskModal()">Done</div>
</ion-header-bar>

<ion-content>
    <form class="list item-text-wrap">
        <!-- GLOBAL TASK NAME BOX START -->
        <label class="item item-input">
        <input type="text" placeholder="Enter Global Task Name" ng-model="globalTask.taskName" ng-keyup="maxLengthValidation()">
        <h6 class="eag-character-count">{{globalTask.taskName.length}}/{{maxLength}}</h6>

        </label>
        <!-- GLOBAL TASK NAME BOX END -->
        <ion-item class="item-divider">Category:</ion-item>
        <!-- SEARCH BOX START -->
        <label class="item item-input" name="Search">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="search" placeholder="Search" ng-model="globalTask.task">
        </label>
        <!-- SEARCH BOX END -->
        <!-- GOBAL TASK CODES (ng-repeat) START -->
        <label class="item item-radio" collection-repeat="globalTaskItem in globalTaskList | filter:globalTask.task">
            <input type="radio" name="group" ng-model="SelectedValue" ng-click="selectedGlobaltask(globalTaskItem)" ng-checked="{{checked}}">
            <div class="item-content">
                {{globalTaskItem.standardCodeName}}
            </div>
            <i class="radio-icon ion-checkmark"></i>
        </label>
        <!-- GOBAL TASK CODES (ng-repeat) END -->
        <!-- NO RESULTS MESSAGE START -->
        <label class="item" ng-if="results.length == 0">
            <strong>No results found...</strong>

        </label>
        <!-- NO RESULTS MESSAGE END -->
    </form>
</ion-content>

问题截图:

所以我这里有一些乱七八糟的 ng-repeating 单选按钮列表。其中一些的文本对于元素的宽度而言太长，因此会被省略号 chop 。我在列表级别包含 ionic 类“item-text-wrap”(我也在元素级别尝试过相同的结果)并且它正在工作，但是元素的高度不会根据内容进行调整当它被推下一条线时。

你知道为什么会这样吗/我能做些什么来解决这个问题？

提前致谢!

Answer 1

这对你有帮助。

 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;