Скройте эллипсы, если в нем нет даже одного символа - PullRequest
Новая
       11

Скройте эллипсы, если в нем нет даже одного символа

0 голосов
/ 04 июля 2019

У меня есть кнопка со значком и некоторым текстом. В настоящее время я показываю эллипсы при переполнении текста.Но я хочу показать только значок, а не эллипсы, если отображаются только эллипсы.

Как и в примере, показанном ниже, так как нет даже одного символа с эллипсами, а только три точки (...) отображаются.Я хочу скрыть, чтобы скрыть эти три точки и отобразить только кнопку со значком. 

.btn{
  display: inline-flex;
  width: 46px;
  text-overflow: ellipses;
  overflow: hidden;
  white-space: nowrap;
}
.btn .icon{
  flex-shrink: 0;
  margin-right: 2px;
}
.btn .text{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 1;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <button class="btn">
        <span class="icon"><i class="fa fa-html5"></i></span>
        <span class="text">button</span>
    </button>
  </body>

</html>

1 Ответ

0 голосов
/ 04 июля 2019

Не уверен, что это полностью работает для того, что вы ищете, но кажется на первый взгляд. 

.btn{
  display: inline-flex;
  position: relative;
}
.btn .icon{
  position: absolute;
  left: 0px;
}

.btn .text{
  position: absolute;
  left: 20px;
  text-align: left;
  max-width: 30px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 1;
  display: inline-block;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <button class="btn">
        <span class="icon"><i class="fa fa-html5"></i><span class="text">testing</span></span>
        
    </button>
  </body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...