How to make text fit in div?-CodePudding

I'm styling a link to make it look like the photo. The problem is in the second div, text over div. In the scope of the question is an example of the photo of how it is and how it should be. (I left the text color in black to illustrate the problem)

How it should be

  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 >
  <a href="#link"><div ><p>Comida</p></div></a>
  <a href="#link"><div ><p>Bebidas Alcoolicas</p></div></a>
  <a href="#link"><div ><p>Bebidas</p></div></a>
</div>

CodePudding user response：

  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 >
  <a href="#link"><div ><p>Comida</p></div></a>
  <a href="#link"><div ><p>Bebidas Alcoolicas</p></div></a>
  <a href="#link"><div ><p>Bebidas</p></div></a>
</div>

now your problem is solved.

CodePudding user response：

just add css in your (.div-categoria p) block it will work

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

CodePudding user response：

Try using CSS word-wrap property to .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;
  }

or if you want to fit the text inside then try decreasing font-size ..

CodePudding user response：

You just need to replace below class. It will fix your issue.

 .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 >
  <a href="#link"><div ><p>Comida</p></div></a>
  <a href="#link"><div ><p>Bebidas Alcoolicas</p></div></a>
  <a href="#link"><div ><p>Bebidas</p></div></a>
</div>

CodePudding user response：

To automatically fit to container, consider using a JavaScript helper library such as textFit.

<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 >
<a href="#link"><div ><p>Comida</p></div></a>
<a href="#link"><div ><p>Bebidas Alcoolicas</p></div></a>
<a href="#link"><div ><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>