html - 使用 flex 截断文本溢出

Question

我有以下代码，我想用省略号截断某些元素中的文本

'use strict';

angular.module('some-module')
    .component('chipInput', {
        templateUrl: 'modules/some-module/views/chip-input.html',
        bindings: {
            initialValue: '<?',
            options: '<?',
            forceOptions: '<?',
            debounce: '<?',
            readTransformer: '&',
            writeTransformer: '&',
            onChange: '&',
            onSearch: '&',
            placeholder: '@'
        },
        controller: function ($attrs, $element, KEY_CODES) {
            let self = this;

            self.showOption = showOption;
            self.onOptionSelect = onOptionSelect;
            self.removeChip = removeChip;
            self.availableOptions = availableOptions;
            self.onFocus = onFocus;
            self.onBlur = onBlur;
            self.showOptionsDropdown = showOptionsDropdown;
            self.showNewChipInput = showNewChipInput;
            self.onInputChange = onInputChange;

            self.$onInit = onInit;

            function onInit() {
                self.newChip = "";
                self.showOptions = false;
                self.input = $element[0].querySelector(".chip-input-text");
                self.optionIndex = -1;
                self.initialValue = self.initialValue || [];

                self.keys = [
                    {
                        combination: [KEY_CODES.ARROW_UP],
                        action: () => {
                            if (self.optionIndex === -1) {
                                return;
                            }

                            self.optionIndex--;
                        }
                    },
                    {
                        combination: [KEY_CODES.ARROW_DOWN],
                        action: () => {
                            if (_.isEmpty(availableOptions(self.newChip)) || self.optionIndex >= availableOptions(self.newChip).length - 1) {
                                return;
                            }

                            self.optionIndex++;
                        }
                    },
                    {
                        combination: [KEY_CODES.TAB],
                        action: onSubmit
                    },
                    {
                        combination: [KEY_CODES.ENTER],
                        action: onSubmit
                    }
                ];

                if (!$attrs.$attr.readTransformer) {
                    self.readTransformer = value => value.option;
                }

                if (!$attrs.$attr.writeTransformer) {
                    self.writeTransformer = value => value.value;
                }

                if (!self.debounce) {
                    self.debounce = 0;
                }
            }


            function onInputChange () {
                self.optionIndex = -1;
                self.onSearch({test: self.newChip});
            }

            function onSubmit() {
                let valid = true;

                if (self.optionIndex === -1) {
                    valid = addChip(self.writeTransformer({value: self.newChip}));
                }
                else {
                    valid = addChip(self.availableOptions(self.newChip)[self.optionIndex]);
                }

                if (!valid) {
                    return;
                }

                self.newChip = "";
                self.optionIndex = -1;
            }

            function onBlur() {
                self.optionIndex = -1;
                self.showOptions = false;
            }

            function onFocus() {
                self.showOptions = true;
            }

            function availableOptions(search) {
                return _.filter(self.options, option => showOption(option, search));
            }

            function removeChip(chip) {
                _.remove(self.initialValue, val => val === chip);
                self.onChange({value: self.initialValue});
            }

            function addChip(option) {
                if (!option || (self.forceOptions && !searchInOptions(option)) || isOptionAlreadyExists(option)) {
                    return false;
                }

                self.initialValue.push(option);
                self.onChange({value: self.initialValue});

                return true;
            }

            function searchInOptions(optionToSearch) {
                return _.find(self.options, option => self.readTransformer({option}) === self.readTransformer({option: optionToSearch}));
            }

            function onOptionSelect(option) {
                addChip(option);
                self.input.focus();
            }

            function isOptionAlreadyExists(option) {
                return !!_.find(self.initialValue, chip => self.readTransformer({option: chip}) === (self.readTransformer({option: option})));
            }

            function showOption(option, search) {
                return !isOptionAlreadyExists(option) && (!search || (option && self.readTransformer({option}).toLowerCase().indexOf(search.toLowerCase()) !== -1));
            }

            function showOptionsDropdown() {
                return self.showOptions && self.availableOptions(self.newChip).length > 0;
            }

            function showNewChipInput() {
                return !self.forceOptions || !_.isEmpty(availableOptions(""));
            }
        }
    });

chip-input {
  position: relative;
  display: flex;
  cursor: pointer;
  align-content: center;
  text-decoration: none;
  color: #afafaf;
  flex-wrap: wrap;
  padding-right: 10px;
  border-bottom: 1px solid #dbdbdb;

  .chip-input-chips {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;

    .chip-input-chip {
      border-radius: 50px;
      padding: 3px 25px 3px 10px;
      position: relative;
      max-width: 100%;
      display: inline-block;
      align-items: center;
      margin: 3px 3px 3px 0;
      color: #666;
      background: #e0e7ea;
      font-size: 11px;

      .chip-input-remove-chip {
        font-size: 15px;
        color: gray;
        position: absolute;
        right: 7px;
        align-self: center;
      }
    }
  }

  .chip-input-text {
    border: none;
    outline: none;
    font-size: 12px;
    margin: 6px 0;
    color: rgba(0, 0, 0, .87);
    padding: 0 7px;

    &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: #afafaf;
      opacity: 1; /* Firefox */
    }

    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: #afafaf;

    }
    &::-ms-input-placeholder { /* Microsoft Edge */
      color: #afafaf;
    }
  }

  .chip-input-autocomplete {
    top: 100%;
    position: absolute;
    background: white;
    border: 1px #ebebeb solid;
    width: 100%;
    left: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 1px 1px 2px 0 #999999;
    z-index: 1;
    margin-top: 2px;
    margin-bottom: 4px;

    .chip-input-autocomplete-option {
      display: flex;
      height: 35px;
      align-items: center;
      flex: 1;
      flex-shrink: 0;
      padding: 0 10px 0;
      color: rgba(0, 0, 0, .87);

      &:hover, &.current-option {
        background: #ebebeb;
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }
}

.ellipsis {
    white-space: nowrap;
    /* text-align: start; */
    text-overflow: ellipsis;
    overflow: hidden;
}

<div class="chip-input-chips ellipsis" ng-if="$ctrl.initialValue && $ctrl.initialValue.length !== 0">
    <div class="chip-input-chip ellipsis"
         ng-repeat="chip in $ctrl.initialValue">
        {{$ctrl.readTransformer({option: chip})}}
        <i class="mdi mdi-close-circle chip-input-remove-chip" ng-click="$ctrl.removeChip(chip)"></i>
    </div>
</div>
<input type="text"
       shortcut="$ctrl.keys"
       prevent-default-on="[9, 13]"
       placeholder="{{$ctrl.placeholder}}"
       ng-model="$ctrl.newChip"
       ng-focus="$ctrl.onFocus()"
       ng-change="$ctrl.onInputChange()"
       click-outside="$ctrl.onBlur()"
       whitelist="['.chip-input-autocomplete']"
       class="chip-input-text"
       ng-show="$ctrl.showNewChipInput()"
       ng-model-options="{debounce: $ctrl.debounce}"/>
<div class="chip-input-autocomplete" ng-if="$ctrl.showOptionsDropdown()">
    <div class="chip-input-autocomplete-option ellipsis"
         ng-repeat="(key, option) in $ctrl.availableOptions($ctrl.newChip)"
         ng-click="$ctrl.onOptionSelect(option)"
         ng-class="{'current-option': $ctrl.optionIndex === key}"
         title="{{$ctrl.readTransformer({option: option})}}">
        {{$ctrl.readTransformer({option: option})}}
    </div>
</div>

我想截断 .chip-input-chip 和 .chip-input-autocomplete-option，但不是截断而是溢出..

如果我在 chip-input 上写 overflow-x: hidden 它会创建垂直滚动..

如何防止溢出并截断文本？

更新: 容器(芯片输入)上带有 overflow-x: hidden 的图像，如您所见，文本被省略号截断，但 overflow-x: hidden 也添加垂直滚动条...

Answer 1

试试这个。

.chip-input-chip, .chip-input-autocomplete-option{
    width:100%;
    overflow: hidden;
    white-space: nowrap;
}