How to make text fit in div?

xSkolz 0
Viewed 66

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)

enter image description here

How it should be

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>

django javascript css html
5 Answers

  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>

now your problem is solved.

Manoj Tolagekar0

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

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

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 ..

ADIL AHMED0

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 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>

Frontend Team0

To automatically fit to container, consider using a JavaScript helper library such as 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>

tresf0
Related