Блог

У меня есть сайт какого-то музея из Интернета с загрузкой и отображением изображений. Для их отображения используется функция php foreach. Проблема в том, что это выглядит как на картинке. Я хотел бы сделать заголовок больше, и если описание длинное, оно покрыто изображением в следующей строке. Есть ли способ исправить эту 2-ую вещь? (Просто я хочу, чтобы заголовок был больше, и если описание содержит более 15 букв, оно отображается после 15-й буквы … и он будет полностью виден, когда вы нажмете на изображение в полноэкранном режиме.) Или есть ли способ сделать это лучше?

Вот как это выглядит

 .home .media-list {  display: flex;  flex-flow: wrap;  }  .home .media-list a {  display: block;  text-decoration: none;  position: relative;  margin-bottom: 60px;  margin-left: 30px; }  .home .media-list a:nth-child(3n) {  margin-right: 0; }  .home .media-list .placeholder {  display: flex;  flex-flow: column;  width: 100%;  height: 100%;  justify-content: center;  align-items: center;  background-color: #ddd;  color: #bbb;  font-weight: bold; }  .home .media-list .placeholder i {  padding-bottom: 15px; }  .home .media-list .description {  display: flex;  justify-content: center;  align-items: center;  text-align: center;  position: absolute;  opacity: 0;  top: 0;  left: 0;  color: #fff;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.2);  padding: 15px; } lt;/stylegt;  lt;div class="content home"gt;  lt;div class="media-list"gt;  lt;?php foreach ($media as $m): ?gt;  lt;?php if (file_exists($m['filepath'])): ?gt;  lt;a href="#" style="width:lt;?=$imgwidth?gt;px;height:lt;?=$imgheight?gt;px;"gt;  lt;img src="lt;?=$m['filepath']?gt;" alt="lt;?=$m['imgdescription']?gt;" data-id="lt;?=$m['id']?gt;" data-title="lt;?=$m['title']?gt;" width="lt;?=$imgwidth?gt;" height="lt;?=$imgheight?gt;"gt;  lt;div style="color:white; text-align:center; text-size:35px; font-size:15px;"gt;lt;?=$m['title']?gt;lt;/divgt;  lt;div style="color:white; text-align:center;"gt; lt;?=$m['imgdescription']?gt;lt;/divgt;  lt;div style="color:white; text-align:center;"gt; lt;?=$m['seconddescription']?gt;lt;/divgt;  lt;/agt;  lt;?php endif; ?gt;  lt;?php endforeach; ?gt;  lt;/divgt;