Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/3: Рейтинг темы: голосов - 3, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 24.04.2020
Сообщений: 4
1

Текст наслаивается друг на друга при переносе

02.01.2023, 18:18. Показов 504. Ответов 3
Метки css (Все метки)
Author24 — интернет-сервис помощи студентам
Доброго времени суток. Пытаюсь сделать версту по макету. С левой частью все нормально, а справа при отступе текст наслаивается друг на друга, хотя и там и там +- одинаково. Можете пожалуйста помочь с переносами или посоветовать как сделать лучше. ссылка на код пен: https://codepen.io/NIKITA51438813/pen/gOjMvxw
HTML5
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217

<header>
  <div class="banner">
    <div class="banner-container">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/noemi-logo.svg" alt="Логотип" class="banner_logo">
    </div>
    <span class="banner-title">Блог о творчестве, спорте, и образе жизни</span>
    <ul class="menu-list">
      <li class="menu-list-item"><a href="#0" class="menu-item">Главная</a></li>
      <li class="menu-list-item"><a href="#0" class="menu-item">Статьи</a></li>
      <li class="menu-list-item"><a href="#0" class="menu-item">Теги</a></li>
      <li class="menu-list-item"><a href="#0" class="menu-item">Темы</a></li>
      <li class="menu-list-item"><a href="#0" class="menu-item">Контакты</a></li>
    </ul>
  </div>
</header>
<main class="content">
    <article class="laters-posts-content">
    <div class="laters-posts">
   <div class="last-posts-title">
     Новые посты
    <div class="outline"></div>
   </div>
      <div class="new-posts">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/2.jpg" alt="рассвет у моря" class="picture-post">
    <div class="later-post">
      <time class="post-date" datetime="2019-06-14">14 июня 2019</time><br>
      <a href="#0" class="later-post-item">10 мест, ради которых
стоит проснуться      
   </a>
    </div>  
      </div>
      
    </div>
  </article>
  <article class="laters-posts-content">
    <div class="laters-posts">
   <div class="last-posts-title">
     Новые посты
    <div class="outline"></div>
   </div>
      <div class="new-posts">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/2.jpg" alt="рассвет у моря" class="picture-post">
    <div class="later-post">
      <time class="post-date" datetime="2019-06-14">14 июня 2019</time><br>
      <a href="#0" class="later-post-item">10 мест, ради которых
стоит проснуться      
   </a>
    </div>  
      </div>
      
    </div>
  </article>
  <article class="post-list">
    <div class="frame-post">
      <div class="category-post">
        <a href="#0" class="category-post-item">Travel</a>
        <a href="#0" class="category-post-item">Health</a>
      </div>
 
      <div class="title-post">
        <a href="#0" class="title-post-item">10 мест, ради которых стоит
          проснуться на рассвете</a>
      </div>
      <div class="date-author-post">
        <time class="post-date" datetime="2019-06-10">10 июня 2019</time>
        Неизвестный автор
      </div>
      <div class="text-post">
        <p>Итак, вы в Питере. Раннее утро. Лед с рек и каналов уже ушел, запущены фонтаны города… Музеи еще закрыты. Что посмотреть?</p>
      </div>
    </div>
    <div class="picture">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post1.jpg" alt="рассвет у моря" class="picture-post">
    </div>
  </article>
  <article class="post-list">
    <div class="frame-post">
      <div class="category-post">
        <a href="#0" class="category-post-item">Health</a>
        <a href="#0" class="category-post-item">lifestyle</a>
      </div>
 
      <div class="title-post">
        <a href="#0" class="title-post-item">ЙОга для начинающих в
          домашних условиях</a>
      </div>
      <div class="date-author-post">
        <time class="post-date" datetime="2019-06-10">10 июня 2019</time>
        Неизвестный автор
      </div>
      <div class="text-post">
        <p>Расскажем, какие упражнения выбрать и как сделать коврик для занятий йогой из того, что можно найти в шкафу.</p>
      </div>
    </div>
    <div class="picture">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post2.jpg" alt="йога у моря" class="picture-post">
    </div>
  </article>
  <article class="post-list">
    <div class="frame-post">
      <div class="category-post">
        <a href="#0" class="category-post-item">Music</a>
      </div>
 
      <div class="title-post">
        <a href="#0" class="title-post-item">Лучшие музыкальные
фестивали этого лета</a>
      </div>
      <div class="date-author-post">
        <time class="post-date" datetime="2019-06-10">10 июня 2019</time>
        Неизвестный автор
      </div>
      <div class="text-post">
        <p>Лето на носу, а с ним и музыкальные фестивали. На каком же из них вы разобьёте свою палатку?</p>
        <p>Мы составили список лучших летних фестивалей по всему миру.</p>
      </div>
    </div>
    <div class="picture">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post3.jpg" alt="музыкальный фестиваль" class="picture-post">
    </div>
  </article>
      <article class="post-list">
    <div class="frame-post">
      <div class="category-post">
        <a href="#0" class="category-post-item">lifestyle</a>
        <a href="#0" class="category-post-item">food</a>
      </div>
 
      <div class="title-post">
        <a href="#0" class="title-post-item">Наукоёмкий подход к
кулинарии</a>
      </div>
      <div class="date-author-post">
        <time class="post-date" datetime="2019-06-10">10 июня 2019</time>
        Неизвестный автор
      </div>
      <div class="text-post">
        <p>Узнаем основы проектирования новых пищевых и около-пищевых опытов, вскроем физику, химию и микробиологию еды.</p>
      </div>
    </div>
    <div class="picture">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post4.jpg" alt="обед" class="picture-post">
    </div>
  </article>
      <article class="post-list">
    <div class="frame-post">
      <div class="category-post">
        <a href="#0" class="category-post-item">Lifestyle</a>
        <a href="#0" class="category-post-item">INTERIOR</a>
        <a href="#0" class="category-post-item">art</a>
      </div>
 
      <div class="title-post">
        <a href="#0" class="title-post-item">делаем модные принты на
подушках для интерьера </a>
      </div>
      <div class="date-author-post">
        <time class="post-date" datetime="2019-06-10">10 июня 2019</time>
        Неизвестный автор
      </div>
      <div class="text-post">
        <p>Подушки для дивана целесообразнее заказать в съемных чехлах на молнии, если потребуется чистка подушек, проще снять чехлы, чем везти подушку в химчистку.</p>
      </div>
    </div>
    <div class="picture">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post5.jpg" alt="подушка с принтом" class="picture-post">
    </div>
  </article>
  <article class="post-list">
    <div class="frame-post">
      <div class="category-post">
        <a href="#0" class="category-post-item">travel</a>
        <a href="#0" class="category-post-item">lifestyle</a>
      </div>
 
      <div class="title-post">
        <a href="#0" class="title-post-item">Как первый раз отправиться
в горы?</a>
      </div>
      <div class="date-author-post">
        <time class="post-date" datetime="2019-06-10">10 июня 2019</time>
        Неизвестный автор
      </div>
      <div class="text-post">
        <p>Для начала нужно определиться, в каком формате пройдёт ваше путешествие. Это зависит от многих факторов, не только от ваших желаний и интересов.</p>
      </div>
    </div>
    <div class="picture">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post6.jpg" alt="гора" class="picture-post">
    </div>
  </article>
 <article class="post-list">
    <div class="frame-post">
      <div class="category-post">
        <a href="#0" class="category-post-item">lifestyle</a>
        <a href="#0" class="category-post-item">food</a>
      </div>
 
      <div class="title-post">
        <a href="#0" class="title-post-item">Наукоёмкий подход к
кулинарии</a>
      </div>
      <div class="date-author-post">
        <time class="post-date" datetime="2019-06-10">10 июня 2019</time>
        Неизвестный автор
      </div>
      <div class="text-post">
        <p>Узнаем основы проектирования новых пищевых и около-пищевых опытов, вскроем физику, химию и микробиологию еды.</p>
      </div>
    </div>
    <div class="picture">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post4.jpg" alt="обед" class="picture-post">
    </div>
  </article>
 
  
</main>
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252

@font-face {
  font-family: "OpenSans";
  src: url("https://netology-code.github.io/html-2-diploma/sources/fonts/OpenSans-Regular.woff")
      format("woff2"),
    url("https://netology-code.github.io/html-2-diploma/sources/fonts/OpenSans-Regular.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
 
@font-face {
  font-family: "OpenSans";
  src: url("https://netology-code.github.io/html-2-diploma/sources/fonts/OpenSans-Bold.woff")
      format("woff2"),
    url("https://netology-code.github.io/html-2-diploma/sources/fonts/OpenSans-Bold.woff")
      format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
 
body {
  margin: 0;
}
 
.banner {
  position: relative;
  width: 1170px;
  height: 450px;
  background-image: url(https://netology-code.github.io/html-2-diploma/sources/images/banner-bg.jpg);
  background-color: rgba(0, 0, 0, 0.6);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: top right 50%;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
 
.banner:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2;
}
 
.banner_logo {
  position: absolute;
  width: 179px;
  height: 41px;
  left: 3px;
  top: 20px;
  z-index: 3;
}
 
.banner-title {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 193px;
  text-align: center;
  width: 715px;
  font-family: OpenSans, Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 74.97 px;
  font-size: 45px;
  color: #fff;
  z-index: 3;
}
 
.menu-list {
  position: absolute;
  right: -2px;
  top: 0;
  display: flex;
  z-index: 3;
}
 
.menu-list-item {
  font-family: OpenSans, Arial, sans-serif;
  text-transform: uppercase;
  line-height: 36px;
  font-size: 13px;
  list-style-type: none; 
  margin-left: 35px;
}
 
.menu-item {
  color: #fff;
  text-decoration: none;
}
 
.menu-item:hover {
    text-decoration: underline;
   }
 
.content {
  margin: 64px 0;
  width: 1170px;
  height: 2420px;
  margin-left: auto;
  margin-right: auto; 
}
 
.post-list {
  position: relative;
  width: 748px;
  margin-bottom: 59px;
}
 
.frame-post {
  position: absolute;
  margin-left: 30px;
  top: -11px;
  left: 381px;
  width: 367px;
  height: 294px;
}
 
.category-post {
  font-family: OpenSans, Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 39.98px;
  font-size: 14px;
  word-spacing: 19px;
}
 
.category-post-item {
  text-decoration: none;
  color: #b59f5b;
}
 
.category-post-item:hover {
  text-decoration: underline;
}
 
.title-post {
  font-family: OpenSans, Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 23.99px;
  font-size: 20px;
  margin-bottom: 10px;
  
}
 
.title-post-item {
  color: #000;
  text-decoration: none;
}
 
.title-post-item:hover {
  color: #b59f5b;
}
 
.date-author-post {
  font-family: OpenSans, Arial, sans-serif;
  font-weight: bold;
  line-height: 39.98px;
  font-size: 12px;
  margin-bottom: 35px;
}
 
.post-date {
  font-family: OpenSans, Arial, sans-serif;
  font-weight: normal;
  color: #888888;
  line-height: 39.98px;
  font-size: 12px;
  margin-right: 11px;
  text-transform: none;
}
 
.text-post {
  font-family: OpenSans, Arial, sans-serif;
  font-weight: normal;
  line-height: 22px;
  font-size: 15px;
  color: #000;
}
 
.picture{
  width: 381px;
  height: 294px;
}
 
.picture-post {
  position: absolute;
}
 
.laters-posts-content {
  position: relative;
  margin-bottom: 22px;
}
 
.laters-posts {
  position: absolute;
  margin-left: 150px;
  top: -10px;
  left: 748px;
  width: 272px;
  height: 602px;
}
 
.last-posts-title {
  text-align: center;
  font-family: OpenSans, Arial, sans-serif;
  font-weight: bold;
  line-height: 29.15px;
  text-transform: uppercase;
  font-size: 14px;
  color: #000;
}
 
.outline {
  width: 66px;
  height: 3px;
  background-color: rgba(181, 159, 92, 0.4);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 29px;
}
 
.new-posts{
  position: absolute;
}
 
.later-post {
  font-family: OpenSans, Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 17.99px;
  font-size: 14px;
  margin-left: 90px;
  margin-top: -15px;
}
 
.later-post-item {
  color: #000;
  text-decoration: none; 
}
 
.later-post-item:hover {
  color: #b59f5b;
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 02.01.2023, 18:18
Ответы с готовыми решениями:

Все наслаивается друг на друга
Здравствуйте, Старая проблема, в превью всё выглядит красиво, а как запущу - все элементы...

При отрисовке текста в listView, текст из разных столбцов накладывается друг на друга
При отрисовке текста в listView, текст из разных столбцов накладывается друг на друга ...

Как в PHP отделить элементы друг от друга, чтобы не ругались друг на друга?
&lt;?php $chitat = fopen('yoo.txt', 'r'); if (!$chitat) { echo 'Ошибка при открытии файла...

Текст накладывается друг на друга
Всем привет, такая проблема, не могу всавить текст в ячейку таблицы, не располагается по все высоте...

3
29 / 26 / 10
Регистрация: 04.03.2013
Сообщений: 857
03.01.2023, 13:46 2
Здравствуйте!
Можете на скрине показать проблему?
У меня всё нормально работает
0
0 / 0 / 0
Регистрация: 24.04.2020
Сообщений: 4
03.01.2023, 22:46  [ТС] 3
Здравствуйте, при копировании этого фрагмента, что бы продолжить новые посты, как раз и происходит наслоение.
Код
<article class="laters-posts-content">
    <div class="laters-posts">
   <div class="last-posts-title">
     Новые посты
    <div class="outline"></div>
   </div>
      <div class="new-posts">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/2.jpg" alt="рассвет у моря" class="picture-post">
    <div class="later-post">
      <time class="post-date" datetime="2019-06-14">14 июня 2019</time><br>
      <a href="#0" class="later-post-item">10 мест, ради которых
стоит проснуться      
   </a>
    </div>  
      </div>
      
    </div>
  </article>
0
29 / 26 / 10
Регистрация: 04.03.2013
Сообщений: 857
04.01.2023, 08:28 4
losttime, можно стилю later-post ограничить высоту текста по строкам и скрывать часть не вмещаемого текста:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.later-post {
  font-family: OpenSans, Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 17.99px;
  font-size: 14px;
  margin-left: 90px;
  margin-top: -15px;
 
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  line-clamp: 4;
  display: -webkit-box;
  display: box;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -ms-line-clamp: 4;
  -webkit-line-clamp: 4;
}
Конечно, можете на свой вкус параметры выставить.
text-overflow: ellipsis; - скроет часть текста и поставит в конце многоточие, если значение равное clip сделать, то в конце многоточия не будет.
overflow: hidden; - скрывает текст, который не поместился.
line-clamp - задает количество строк. В данном случае четвертую строку скроем.
Миниатюры
Текст наслаивается друг на друга при переносе  
0
04.01.2023, 08:28
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 04.01.2023, 08:28
Помогаю со студенческими работами здесь

Текст налегает друг на друга
Ребят, подскажите пожалуйста. Поставил новый шаблон, все отлично, но... Если создать большой...

Текст накладывается друг на друга
Здравствуйте помогите пожалуйста как зделать так у меня сейчас так вот скрипт ...

Дан текст, слова которого отделяются друг от друга пробелами
Дан текст, слова которого отделяются друг от друга пробелами. Все слова, которые начинаются и...

Задан текст, в котором слова отделены друг от друга пробелами
Всем привет!!! Ребята помогите розобраться в shell!!! Задан текст, в котором слова отделены...

Как сделать, чтобы картинка и текст в Label не накладывались друг на друга
Добрый день! У меня есть label, включил для него иконку. Нужно, чтобы иконка показывалась слева...

Дан текст, слова которого отделяются друг от друга пробелами. Преобразовать его следующим образом:
Дан текст, слова которого отделяются друг от друга пробелами. Преобразовать его следующим образом:...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru