Сделать середину из трех элементов в строке заполнить оставшееся пространство - PullRequest
Новая
       36

Сделать середину из трех элементов в строке заполнить оставшееся пространство

0 голосов
/ 23 сентября 2018

Мне нужно три элемента.Два элемента с каждой стороны и один текстовый элемент посередине.Текст в середине должен быть выровнен по левому краю (с плавающей точкой) к первому элементу.

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

## This is sample text! ## превратится в ## This is samp... ## (где## являются боковыми элементами), если ширина не может вместить все элементы. 

.container {
  height: 30px;
  background-color: #ff0000;
}

.container > .container-first {
  display: inline-block;
  background-color: #0000ff;
  width: 20px;
  height: 30px;
  float: left;
}

.container > .container-second {
  display: inline-block;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  float: left;
}

.container > .container-third {
  display: inline-block;
  background-color: #00ff00;
  width: 20px;
  height: 30px;
  float: right;
}
<div class="container">
  <div class="container-first"></div>
  <div class="container-second">This one has sample text!</div>
  <div class="container-third"></div>
</div>

Обратите внимание, что этот ответ не помог, поскольку он просто перемещает каждого дочернего элемента в свою собственную строку.

Ответы [ 2 ]

0 голосов
/ 23 сентября 2018

Это можно легко сделать с помощью сетки начальной загрузки, CSS-переполнения и свойства переполнения текста.Вам нужно связать файл начальной загрузки в разделе head.

Проверьте это. 

.ellipsis {
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

  <div class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-xs-3">
          <div>Hello Hello</div>
        </div>
        <div class="col-md-4 col-xs-6">
          <div class="ellipsis">Hello Hello Hello Hello Hello Hello </div>
        </div>
        <div class="col-md-4 col-xs-3">
          <div>Hello Hello</div>
        </div>
    </div>
  </div>
0 голосов
/ 23 сентября 2018

Я использую flexbox для .container и задаю flex: 1 для .container-second.Таким образом, все поплавки могут быть удалены, а поток документов остается неизменным.

Надеюсь, это поможет. 

.container {
  height: 30px;
  background-color: #ff0000;
  display: flex;
}

.container>.container-second {
  flex: 1;
}

.container>.container-first {
  display: inline-block;
  background-color: #0000ff;
  width: 20px;
  height: 30px;
}

.container>.container-second {
  display: inline-block;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.container>.container-third {
  display: inline-block;
  background-color: #00ff00;
  width: 20px;
  height: 30px;
}
<div class="container">
  <div class="container-first"></div>
  <div class="container-second">This one has sample text!This one has sample text!This one has sample text!This one has sample text!This one has sample text!</div>
  <div class="container-third"></div>
</div>
...