Как заставить один текст перекрывать другой текст без абсолютной позиции - PullRequest
Новая
       35

Как заставить один текст перекрывать другой текст без абсолютной позиции

0 голосов
/ 27 мая 2018

У меня есть два текстовых поля внутри гибкой строки шириной 100%.Один расположен слева, а другой справа.Я хочу, чтобы текст справа перекрывал / закрывал текст слева, когда размер контейнера (окна) изменялся (уменьшался) справа.

Решения не должны использовать абсолютное позиционирование.Левый текст имеет левое поле, на котором правый текст должен останавливаться.Контейнер для текста целенаправленно представляет собой строку шириной 100%.

Fiddle - не лучшая платформа для тестирования макета и изменения размера, но https://jsfiddle.net/Lcjcyp4g/6/

Позиция: решение abs прокомментировано вгибкий код ниже для полноты.Пожалуйста, игнорируйте поведение resize-right - наш единственный фокус - наложение текста на resize-left. 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
  <div class="container--text">
    <div class="left">Left Text</div>
    <!-- <div class="container--right"> -->
       <div class="right">Right Text</div>
    <!-- </div> -->
  </div>
</div>
</body>
</html>



   html, body {
    height: 100vh;
    width:100%;
    background-color: #D7CCC8;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.container {
    min-width:100%;
    width:100%;
    margin-left:20px;
    height: 14px;
    max-height:14px;
}

.container--text {
    height: 14px;
    max-height:14px;
    width:100%;
    display: flex;
    flex-flow: row nowrap;
    padding: 10px 0;
}

.left {
    white-space: nowrap;
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    text-overflow: ellipsis;
    flex-shrink:1;
}

/* This is not a viable soln because there is no boundary left for the pos:absolute element without JS*/
.container--right {
  /*height: 14px;
  background-color: #D7CCC8;
  position:absolute;
  right:0;
  */
}
.right {
    white-space: nowrap;
    justify-self:flex-end;
    margin-left:auto;
    margin-right:20px;
    background-color:#BCAAA4;
    color: #616161;
    font-size: 12px;
}

1 Ответ

0 голосов
/ 27 мая 2018

Решение состоит в том, чтобы добавить width: 0;min-width: 0; к левому тексту, чтобы сделать левую часть без размера, поэтому текст будет переполнен.Тогда из-за white-space:nowrap вы не увидите никаких визуальных изменений, но правильный текст сможет покрыть его. 

html,
body {
  margin: 0;
  padding: 0;
}

.container--text {
  display: flex;
  flex-flow: row nowrap;
  padding: 10px 0;
  animation: change 2s infinite linear alternate;
}

.left {
  white-space: nowrap;
  width: 0;
  min-width: 0;
  color: #000000;
  font-weight: bold;
}

.right {
  white-space: nowrap;
  margin-left: auto;
  margin-right: 20px;
  background-color: #BCAAA4;
  color: #616161;
}

@keyframes change {
 from{width:500px;}
 to{width:230px;}
}
<div class="container--text">
  <div class="left">Leeeeeeeeeeeft Text</div>
  <div class="right">Rigggggggggggggggght Text</div>
</div>

Или вы можете опустить width:0 и использовать overflow:hidden, чтобы скрыть текст, когда его контейнер сжимается: 

html,
body {
  margin: 0;
  padding: 0;
}

.container--text {
  display: flex;
  flex-flow: row nowrap;
  padding: 10px 0;
  animation: change 2s infinite linear alternate;
}

.left {
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width: 0;
  color: #000000;
  font-weight: bold;
}

.right {
  white-space: nowrap;
  margin-left: auto;
  margin-right: 20px;
  background-color: #BCAAA4;
  color: #616161;
}

@keyframes change {
  from { width: 500px;}
  to { width: 230px; }
}
<div class="container--text">
  <div class="left">Leeeeeeeeeeeft Text</div>
  <div class="right">Rigggggggggggggggght Text</div>
</div>
...