Блог

Главная - Вопросы по программированию - Полностью скрыть текст переноса на кнопке

Полностью скрыть текст переноса на кнопке

#html #css #button

#HTML #css #кнопка

Вопрос:

Я пытаюсь создать панель с кнопками с текстом кнопки, соответствующим доступной ширине. Когда ширина становится меньше, и (длинный) текст начинает переноситься, должен отображаться другой альтернативный (более короткий) текст. Я делал попытки с CSS grid, Flexbox и translateY (100% — 1em), которые казались многообещающими, но я не мог заставить его работать должным образом в качестве комбинации абсолютного позиционирования внутри Flexbox.

Я хочу добиться этого с помощью чистого CSS, без javascript и медиа-запросов. Как этого добиться?

Это CSS (базовая настройка, однако не работает)

 .button-bar {
     width: 100%;
     height: 10rem;
     display: flex;
     flex-direction: row;
     box-sizing: border-box;
}
 .button-bar button {
     background: green;
     padding: 1em;
     margin: 1.5rem;
     height: 3em;
}
 .button-bar button .button-text-wrapper {
     display: flex;
     background: yellow;
     height: 1em;
     overflow-y: hidden;
}
 .button-bar button .button-text-wrapper .button-text {
     display: flex;
     flex-direction: column;
     height: 1em;
}
 .button-bar button .button-text-wrapper .button-text .long {
     background: orange;
}
 .button-bar button .button-text-wrapper .button-text .short {
     background: tomato;
}
   
 <div class="button-bar">
  <button class="button">
        <div class="button-text-wrapper">
          <div class="button-text">
            <div class="button-text long">Create Account</div>
            <div class="button-text short">Submit</div>
          </div>
        </div>
      </button>
  <button class="button">
        <div class="button-text-wrapper">
          <div class="button-text">
            <div class="button-text  long">Save details</div>
            <div class="button-text short">Update</div>
          </div>
        </div>
      </button>
  <button class="button">
        <div class="button-text-wrapper">
          <div class="button-text">
            <div class="button-text long">Dump my screen now</div>
            <div class="button-text short">Print</div>
          </div>
        </div>
      </button>
</div>

Комментарии:

1. В чем причина отсутствия медиа-запросов?

2. вы можете использовать text-overflow: ellipsis; длинный текст для обрезки на небольших устройствах. нажмите здесь демо

3. @Simplicius: поскольку ширина текста может варьироваться в зависимости от языка. Кроме того, эта панель может использоваться в компонентах, и она не должна зависеть от ширины экрана, а только от ширины содержащего компонента.

4. elliipsis сократит текст, но это не то, что я хочу. Например: если «Создать учетную запись» не помещается в одну строку (высота 1em), то она должна исчезнуть и должен отображаться текст «отправить».

5. Вы не можете сделать это с помощью CSS, вам нужно иметь способ зарегистрировать, что текст прерывается или ширина контейнера становится меньше ширины текста, вам нужно либо использовать медиа-запросы, либо JS

Ответ №1:

             .button-bar {
                width: 100%;
                height: 10rem;
                display: flex;
                flex-direction: row;
                box-sizing: border-box;
            }
            .button-bar button {
                background: green;
                padding: 1em;
                margin: 1.5rem;
                height: 3em;
            }
            .button-bar button .button-text-wrapper {
                display: flex;
                background: yellow;
                height: 1em;
                overflow-y: hidden;
            }
            .button-bar button .button-text-wrapper .button-text {
                display: flex;
                flex-direction: column;
                height: 1em;
            }
            .button-bar button .button-text-wrapper .button-text #create:before {
                background: orange;
                content: 'Create Account';
            }

            .button-bar button .button-text-wrapper .button-text #save:before {
                background: orange;
                content: 'Save details';
            }

            .button-bar button .button-text-wrapper .button-text #print:before {
                background: orange;
                content: 'Dump my screen now';
            }
            
            @media (max-width: 600px) {
                .button-bar button .button-text-wrapper .button-text #create:before {
                    background: tomato;
                    content: 'Submit';
                }

                .button-bar button .button-text-wrapper .button-text #save:before {
                    background: tomato;
                    content: 'Update';
                }

                .button-bar button .button-text-wrapper .button-text #print:before {
                    background: tomato;
                    content: 'Print';
                }
            }  
 <div class="button-bar">
            <button class="button">
                <div class="button-text-wrapper">
                    <div class="button-text">
                        <div class="button-text" id='create'></div>
                    </div>
                </div>
                </button>
            <button class="button">
                <div class="button-text-wrapper">
                    <div class="button-text">
                        <div class="button-text" id='save'></div>
                    </div>
                </div>
                </button>
            <button class="button">
                <div class="button-text-wrapper">
                    <div class="button-text">
                        <div class="button-text" id='print'></div>
                    </div>
                </div>
            </button>
        </div>

Я все еще не понимаю, почему вам это нужно только через css

Ответ №2:

Основываясь на ваших предложениях, я сам нашел решение. В основном он использует элемент с абсолютным расположением для короткого текста и относительное положение под ним для длинного (er) текста в содержащем div, называемом ‘button-text’. По умолчанию высота краткого текста div вычисляется равной нулю, поэтому не отображается.

При уменьшении ширины длинный текст будет переноситься, имея высоту длинного текста 5,2 em. В результате высота содержащего div ‘button-text’ увеличивается, и длинный текст переводится сам. Стандартно, перевод равен нулю. Как только он становится больше ожидаемого текста без упаковки (в данном случае 2,6em), он переводится вне поля зрения (100% — 2,6em);

В то же время высота короткого текста вычисляется до 2,6 em и становится видимой в абсолютном положении top: 0;

Прилагаемый фрагмент является базовым макетом. Он может быть расширен до кнопки переноса на значок, когда также переносится короткий текст, и реализован в панели кнопок с интеллектуальной синхронизацией текста кнопки с иконками, поскольку это было первоначальной целью проекта.

Надеюсь, это поможет! Еще раз большое спасибо за ваше вдохновение :-).

 .button-container {
  width: 80vw;
  left: 10vw;
  margin-top: 10vh;
  background: white;
}

.button-container button.button {
  font-size: 2em;
  width: 100%;
  height: 3em;
  line-height: 2.6em;
  padding: 0.2em;
  min-width: 3em;
  color: #333;
  background-image: radial-gradient(red, yellow, green);
  border: 1px solid black;
  overflow: hidden;
  cursor: defau<
}

.button-container button.button .button-text {
  width: 200%;
}

.button-container button.button .button-text .long {
  width: 50%;
  position: relative;
  float: left;
  overflow-wrap: break-word;
  text-align: center;
}

.button-container button.button .button-text .long-text {
  -webkit-transform: translateY(calc(100% - 2.6em));
  transform: translateY(calc(100% - 2.6em));
  max-height: 5.2em;
}

.button-container button.button .button-text .short {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 2.6em);
  overflow: hidden;
}

.button-container button.button .button-text .short-text {
  white-space: nowrap;
}  
 <div class="button-container">
  <button class="button">
    <div class="button-text">
      <div class="long">
        <div class="short">
          <div class="short-text">hi world</div>
        </div>
        <div class="long-text">hello universe!</div>
      </div>
    </div>
  </button>
</div>