дополнительная ссылка показать / скрыть в зависимости от ширины содержимого слева - PullRequest
Новая
       24

дополнительная ссылка показать / скрыть в зависимости от ширины содержимого слева

0 голосов
/ 26 октября 2018

Мне нужно удалить кнопку «БОЛЬШЕ», когда содержимое левой стороны меньше ширины и, следовательно, вокруг него нет многоточия.

Усечение многоточия работает нормально, если текст левой стороны больше, чем содержимое левой стороны.

2-ая часть показывает кнопку БОЛЬШЕ, которую нужно удалить. 

.parent {
  width: 500px;
  display: flex;
  align-items: center;
}

.parent .child {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.parent .shortAndFixed {
  white-space: nowrap;
  color: blue;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
}
<div class="parent">
  <p class="child">This is a paragraph This is a paragraph This is a paragraph This is a paragraph</p>
  <span class="shortAndFixed">
    MORE
  </span>
</div>

<div class="parent">
  <p class="child">This is a paragraph</p>
  <span class="shortAndFixed">
    MORE
  </span>
</div>
...