title: truncate text overflow with flex
body: <p>I have the following code and I want to truncate the text in some elements with ellipsis</p>
  
  <pre class="lang-js prettyprint-override"><code>'use strict';
  
  angular.module('some-module')
      .component('chipInput', {
          templateUrl: 'modules/some-module/views/chip-input.html',
          bindings: {
              initialValue: '&lt;?',
              options: '&lt;?',
              forceOptions: '&lt;?',
              debounce: '&lt;?',
              readTransformer: '&amp;',
              writeTransformer: '&amp;',
              onChange: '&amp;',
              onSearch: '&amp;',
              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: () =&gt; {
                              if (self.optionIndex === -1) {
                                  return;
                              }
  
                              self.optionIndex--;
                          }
                      },
                      {
                          combination: [KEY_CODES.ARROW_DOWN],
                          action: () =&gt; {
                              if (_.isEmpty(availableOptions(self.newChip)) || self.optionIndex &gt;= 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 =&gt; value.option;
                  }
  
                  if (!$attrs.$attr.writeTransformer) {
                      self.writeTransformer = value =&gt; 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 =&gt; showOption(option, search));
              }
  
              function removeChip(chip) {
                  _.remove(self.initialValue, val =&gt; val === chip);
                  self.onChange({value: self.initialValue});
              }
  
              function addChip(option) {
                  if (!option || (self.forceOptions &amp;&amp; !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 =&gt; self.readTransformer({option}) === self.readTransformer({option: optionToSearch}));
              }
  
              function onOptionSelect(option) {
                  addChip(option);
                  self.input.focus();
              }
  
              function isOptionAlreadyExists(option) {
                  return !!_.find(self.initialValue, chip =&gt; self.readTransformer({option: chip}) === (self.readTransformer({option: option})));
              }
  
              function showOption(option, search) {
                  return !isOptionAlreadyExists(option) &amp;&amp; (!search || (option &amp;&amp; self.readTransformer({option}).toLowerCase().indexOf(search.toLowerCase()) !== -1));
              }
  
              function showOptionsDropdown() {
                  return self.showOptions &amp;&amp; self.availableOptions(self.newChip).length &gt; 0;
              }
  
              function showNewChipInput() {
                  return !self.forceOptions || !_.isEmpty(availableOptions(""));
              }
          }
      });
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>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;
  
      &amp;::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #afafaf;
        opacity: 1; /* Firefox */
      }
  
      &amp;:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #afafaf;
  
      }
      &amp;::-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);
  
        &amp;:hover, &amp;.current-option {
          background: #ebebeb;
        }
  
        &amp;:last-child {
          border-bottom: none;
        }
      }
    }
  }
  
  .ellipsis {
      white-space: nowrap;
      /* text-align: start; */
      text-overflow: ellipsis;
      overflow: hidden;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="chip-input-chips ellipsis" ng-if="$ctrl.initialValue &amp;&amp; $ctrl.initialValue.length !== 0"&gt;
      &lt;div class="chip-input-chip ellipsis"
           ng-repeat="chip in $ctrl.initialValue"&gt;
          {{$ctrl.readTransformer({option: chip})}}
          &lt;i class="mdi mdi-close-circle chip-input-remove-chip" ng-click="$ctrl.removeChip(chip)"&gt;&lt;/i&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;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}"/&gt;
  &lt;div class="chip-input-autocomplete" ng-if="$ctrl.showOptionsDropdown()"&gt;
      &lt;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})}}"&gt;
          {{$ctrl.readTransformer({option: option})}}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/YyJtq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YyJtq.png" alt=""></a></p>
  
  <p>I want to truncate .chip-input-chip and .chip-input-autocomplete-option, but instead of truncating it's overflowing..</p>
  
  <p>If I write <code>overflow-x: hidden</code> on chip-input it's creating vertical scroll..</p>
  
  <p>how can I prevent the overflow and truncate the text?</p>
  
  <p><strong>Update</strong>:
  Image with <code>overflow-x: hidden</code> on the container (chip-input), as you can see, the text is truncated with ellipsis, but the <code>overflow-x: hidden</code> also added vertical scrollbar...</p>
  
  <p><a href="https://i.stack.imgur.com/3P5m1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3P5m1.png" alt="enter image description here"></a></p>