# Text cut off when using custom code?

**URL:** <https://forum.readymag.com/t/text-cut-off-when-using-custom-code/1635>\
**Category:** Custom code\
**Created:** [May 22, 2023, 3:54pm UTC](https://forum.readymag.com/t/text-cut-off-when-using-custom-code/1635 "2023-05-22T15:54:45Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chloe\_Lcg](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/chloe_lcg/32/1090_2.png) [@Chloe\_Lcg](https://forum.readymag.com/u/Chloe_Lcg)\
**Post date:** [May 22, 2023, 3:54pm UTC](https://forum.readymag.com/t/text-cut-off-when-using-custom-code/1635/1 "2023-05-22T15:54:45Z")

</div>

I have tried adjusting margins, padding, etc. and the descenders are still being cut off on my text, Here’s my code:

## ``` <div class="rw-words rw-words-1"> <span>Results</span> <span>Recognition</span> <span>Relevancy</span> <span>Results</span> <span>Recognition</span> <span>Relevancy</span> </div> </h2> </section> ```

CSS

.cycle-wrapper{  
width: 80%;  
position: relative;  
margin: 300px 300px 300px 300px;  
font-family: ‘Playfair Display’;  
padding: 100px;  
}  
.rw-sentence{  
margin: 300px 300px 300px 300px;  
text-align: left;  
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);  
}  
.rw-sentence span{  
color: #252323;  
font-size: 200%;  
font-weight: bold;  
}  
.rw-words{  
display: inline;  
text-indent: 10px;  
}  
.rw-words-1 span{  
position: absolute;  
opacity: 0;  
overflow: hidden;  
color: #252323;  
-webkit-animation: rotateWord 18s linear infinite 0s;  
-ms-animation: rotateWord 18s linear infinite 0s;  
animation: rotateWord 18s linear infinite 0s;  
}  
.rw-words-1 span:nth-child(2) {  
-webkit-animation-delay: 3s;  
-ms-animation-delay: 3s;  
animation-delay: 3s;  
color: #252323;  
}  
.rw-words-1 span:nth-child(3) {  
-webkit-animation-delay: 6s;  
-ms-animation-delay: 6s;  
animation-delay: 6s;  
color: #252323;   
}  
.rw-words-1 span:nth-child(4) {  
-webkit-animation-delay: 9s;  
-ms-animation-delay: 9s;  
animation-delay: 9s;  
color: #252323;  
}  
.rw-words-1 span:nth-child(5) {  
-webkit-animation-delay: 12s;  
-ms-animation-delay: 12s;  
animation-delay: 12s;  
color: #252323;  
}  
.rw-words-1 span:nth-child(6) {  
-webkit-animation-delay: 15s;  
-ms-animation-delay: 15s;  
animation-delay: 15s;  
color: #252323;  
}  
@-webkit-keyframes rotateWord {  
0% { opacity: 0; }  
2% { opacity: 0; -webkit-transform: translateY(-30px); }  
5% { opacity: 1; -webkit-transform: translateY(0px);}  
17% { opacity: 1; -webkit-transform: translateY(0px); }  
20% { opacity: 0; -webkit-transform: translateY(30px); }  
80% { opacity: 0; }  
100% { opacity: 0; }  
}  
@-ms-keyframes rotateWord {  
0% { opacity: 0; }  
2% { opacity: 0; -ms-transform: translateY(-30px); }  
5% { opacity: 1; -ms-transform: translateY(0px);}  
17% { opacity: 1; -ms-transform: translateY(0px); }  
20% { opacity: 0; -ms-transform: translateY(30px); }  
80% { opacity: 0; }  
100% { opacity: 0; }  
}  
@keyframes rotateWord {  
0% { opacity: 0; }  
2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }  
5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}  
17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }  
20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }  
80% { opacity: 0; }  
100% { opacity: 0; }  
}

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [June 2, 2023, 7:28am UTC](https://forum.readymag.com/t/text-cut-off-when-using-custom-code/1635/2 "2023-06-02T07:28:43Z")

</div>

you could add this to your css styles:

```auto
  .rw-words>span{
  height:100%
  
  }
  

```