Как сделать так, чтобы текст помещался в div?

Я стилизую ссылку, чтобы она выглядела как фотография. Проблема во втором div, текст над div. В области вопроса приведен пример фотографии, как есть и как должно быть. (Я оставил цвет текста черным, чтобы проиллюстрировать проблему)

enter image description here

Как должно быть

enter image description here

  var div_color = document.getElementsByClassName('div-categoria');
  console.log
  div_color[0].style.backgroundColor = '#7d35ed';
  div_color[1].style.backgroundColor = '#e93f3f';
  div_color[2].style.backgroundColor = '#e4bf2a';
  .categoria{
    margin: 2.5rem 0;

  }
  .div-categoria{
    display: inline-flex;
    height: 120px;
    width: 120px;
    border-radius: 10px;
    transition: transform .2s;
    margin-right: 20px;
    position: relative
  }
  .div-categoria:hover{
    transform: scale(1.10);
  }
  .categoria a{
    text-decoration: none;
    color: white;
  }
  .div-categoria p {
    margin: 0;
    color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);

    text-transform: uppercase;
    font-size: 25px;
  }
<div class="categoria">
  <a href="#link"><div class="div-categoria"><p>Comida</p></div></a>
  <a href="#link"><div class="div-categoria"><p>Bebidas Alcoolicas</p></div></a>
  <a href="#link"><div class="div-categoria"><p>Bebidas</p></div></a>
</div>

  var div_color = document.getElementsByClassName('div-categoria');
  console.log
  div_color[0].style.backgroundColor = '#7d35ed';
  div_color[1].style.backgroundColor = '#e93f3f';
  div_color[2].style.backgroundColor = '#e4bf2a';
  .categoria{
    margin: 2.5rem 0;

  }
  .div-categoria{
    display: inline-flex;
    height: 120px;
    width: 120px;
    border-radius: 10px;
    transition: transform .2s;
    margin-right: 20px;
    position: relative
 
  }
  .div-categoria:hover{
    transform: scale(1.10);
  }
  .categoria a{
    text-decoration: none;
    color: white;
  }
  .div-categoria p {
    margin: 0;
    color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    z-index: 1

    text-transform: uppercase;
    font-size: 25px;
    text-align: center;
  }
<div class="categoria">
  <a href="#link"><div class="div-categoria"><p>Comida</p></div></a>
  <a href="#link"><div class="div-categoria"><p>Bebidas Alcoolicas</p></div></a>
  <a href="#link"><div class="div-categoria"><p>Bebidas</p></div></a>
</div>

теперь ваша проблема решена.

просто добавьте css в ваш блок (.div-categoria p) он будет работать

word-break: break-all;
text-align: center;
padding: 10px;

Попробуйте использовать свойство CSS word-wrap для .div-categoria p

.div-categoria p {
    margin: 0;
    color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    z-index: 1
    text-transform: uppercase;
    font-size: 25px;
    text-align: center;
    word-wrap: break-word;
  }

или если вы хотите, чтобы текст поместился внутри, попробуйте уменьшить размер шрифта ..

Вам просто нужно заменить приведенный ниже класс. Это решит вашу проблему.

 .div-categoria p {
    margin: 0;
    padding:5px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    font-size: 100%;
    text-align:center;
    color: #FFF;
  }


var div_color = document.getElementsByClassName('div-categoria');
  console.log
  div_color[0].style.backgroundColor = '#7d35ed';
  div_color[1].style.backgroundColor = '#e93f3f';
  div_color[2].style.backgroundColor = '#e4bf2a';
.categoria{
    margin: 2.5rem 0;

  }
  .div-categoria{
    display: inline-flex;
    height: 120px;
    width: 120px;
    border-radius: 10px;
    transition: transform .2s;
    margin-right: 20px;
    position: relative
  }
  .div-categoria:hover{
    transform: scale(1.10);
  }
  .categoria a{
    text-decoration: none;
    color: white;
  }
  .div-categoria p {
    margin: 0;
    padding:5px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    font-size: 100%;
    text-align:center;
    color: #FFF;
  }
<div class="categoria">
  <a href="#link"><div class="div-categoria"><p>Comida</p></div></a>
  <a href="#link"><div class="div-categoria"><p>Bebidas Alcoolicas</p></div></a>
  <a href="#link"><div class="div-categoria"><p>Bebidas</p></div></a>
</div>

Для автоматической подгонки под контейнер рассмотрите возможность использования вспомогательной библиотеки JavaScript, например textFit.

enter image description here

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textfit/2.1.0/textFit.min.js"></script>
<style>
.categoria{
margin: 2.5rem 0;
}
.div-categoria{
display: inline-flex;
height: 120px;
width: 120px;
border-radius: 10px;
transition: transform .2s;
margin-right: 20px;
position: relative
}
.div-categoria:hover{
transform: scale(1.10);
}
.categoria a{
text-decoration: none;
color: white;
}
.div-categoria p {
margin: 0;
color: black;
position: absolute;
text-transform: uppercase;
width: 100%;
height: 100%;
text-transform: uppercase;
/*text-align: center;*/
}
</style>
<div class="categoria">
<a href="#link"><div class="div-categoria"><p>Comida</p></div></a>
<a href="#link"><div class="div-categoria"><p>Bebidas Alcoolicas</p></div></a>
<a href="#link"><div class="div-categoria"><p>Bebidas</p></div></a>
</div>

<script>
var div_color = document.getElementsByClassName('div-categoria');
div_color[0].style.backgroundColor = '#7d35ed';
div_color[1].style.backgroundColor = '#e93f3f';
div_color[2].style.backgroundColor = '#e4bf2a';

var p_list = document.getElementsByTagName('p');
window.textFit(p_list[0]);
window.textFit(p_list[1]);
window.textFit(p_list[2]);
</script>
</html>

Вернуться на верх