При фиксированной ширине флекс контейнера, не работает сокращение текста под троеточие

@novichek_1905 · Регистрация: 16.02.2018

Студворк — интернет-сервис помощи студентам

Есть код:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  *{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
body{
  line-height: 1.5;
  font-family: Arial;
  font-size: 16px;
}
  .box{
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    max-width: 320px;
  }
 
  .img-box{
    margin-right: 20px;
  }
  .title-item{
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: bold;
    color: darkblue;
  }
  </style>
</head>
<body>
  <div class="box">
    <div class="img-box">
      <img src="https://www.placehold.it/100" alt="">
    </div>
    <div class="description-box">
      <div class="title-item">Супер длинный заголовок или как-то так ещё и может быть ещё длиннее</div>
      <div class="text-item"><div>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Запятой дал заманивший вопроса решила, большого семантика рот текст безорфографичный за его жаренные текста букв страну, осталось несколько рыбными парадигматическая!</div>
      <div>Которой последний они предложения ты возвращайся однажды выйти великий его знаках пор деревни вдали эта составитель ее продолжил свой, большой города, от всех текста толку о страну за свой лучше. Бросил?</div>
      <div>Инициал, вскоре возвращайся над необходимыми сбить дорогу сих агентство lorem буквоград раз путь мир, назад взгляд себя по всей за последний! Пустился рукописи океана предупреждал, над реторический даже коварный парадигматическая моей.</div>
      <div>Подзаголовок коварных возвращайся парадигматическая ручеек предложения текст знаках продолжил путь, пустился заманивший гор до рукопись, несколько безопасную своего снова напоивший даже повстречался вскоре. Повстречался эта агентство наш буквоград первую осталось!</div></div>
    </div>
  </div>
</body>
</html>

Как сделать так, что бы контент занимал ширину .box, и при этом текст в селекторе .title-item обрезался под троеточие, интересует решение именно на flex-box.

Qwerty_Wasd · 18.11.2018, 20:55

novichek_1905, Вы это имели ввиду? - https://codepen.io/qwerty_wasd/pen/aQLNpx

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
*,
*:after,
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
body {
  line-height: 1.5;
  font-family: Arial;
  font-size: 16px;
}
 
.box {
  display: -ms-flex;
  display: flex;
  max-width: 320px;
  border: 1px solid red;
}
 
.img-box {
  margin-right: 20px;
}
 
.description-box {
  min-width: 50%;
}
 
.title-item {
  white-space: nowrap;
  overflow: hidden;
  font-weight: bold;
  color: darkblue;
  -ms-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

@novichek_1905 · 18.11.2018, 21:00 **[ТС]**

Сообщение от Qwerty_Wasd

Вы это имели ввиду?

Да, почти, но ещё не могу добиться поведения, когда при уменьшении .box, пропорционально уменьшается и картинка...

Qwerty_Wasd · 18.11.2018, 21:09

novichek_1905, https://codepen.io/qwerty_wasd/pen/aQLNpx

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
*,
*:after,
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
body {
  line-height: 1.5;
  font-family: Arial;
  font-size: 16px;
}
 
.box {
  display: -ms-flex;
  display: flex;
  max-width: 320px;
  border: 1px solid red;
}
 
.img-box {
  margin-right: 20px;
  width: 100%;
}
.img-box img {
  height: auto;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
 
.description-box {
  flex-grow: 1;
  width: 60%;
}
 
.title-item {
  white-space: nowrap;
  overflow: hidden;
  font-weight: bold;
  color: darkblue;
  -ms-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

@novichek_1905 · 18.11.2018, 22:30 **[ТС]**

Qwerty_Wasd, Благодарю! Но не совсем то что нужно, размеры картинки в вашем примере, зависят также и от контента справа... Наглядно будет видно, если удалить контент совсем, картинка восстанавливает свои размеры, как сделать так, что бы картинка была пропорционально уменьшена родительскому блоку, при этом контент не оказывал никакого влияния на неё?

Добавлено через 1 час 13 минут
Может сталкивался кто с таким поведением?

@galawar · 19.11.2018, 09:51

Для .img-box указать максимальную ширину:

CSS
1
2
3
4
5
.img-box {
  width: 100%;
  max-width: 40%;
  padding-right: 20px;
}

Новые блоги и статьи Все статьи Все блоги /
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .
Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	18.11.2018, 22:30 [ТС]
	Qwerty_Wasd, Благодарю! Но не совсем то что нужно, размеры картинки в вашем примере, зависят также и от контента справа... Наглядно будет видно, если удалить контент совсем, картинка восстанавливает свои размеры, как сделать так, что бы картинка была пропорционально уменьшена родительскому блоку, при этом контент не оказывал никакого влияния на неё? Добавлено через 1 час 13 минут Может сталкивался кто с таким поведением? 0