CODEWITHSUNDEEP
htmlcsscss-transitions
Kartikey Mishra
Kartikey Mishra

Reputation: 13

Overflow of text in a div. Not able to put the text in div for mobile devices

I have used typewriter effect for entering some facts in my project. The problem I'm having is that on Desktop it is perfect. But when it comes to the mobile devices the text is clipping. Is there any way to make the rest text appear in next line

I have to use a div for the box and encapsulated the line in it. Kindly help me out.

HTML code

<div class="typo" >
    <p class="line-1 anim-typewriter">text
    </p>
</div>

The CSS code is

.line-1{
    position: relative;
    top: 50%;  
    width: 5em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 120%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    max-width: 50em;
    word-wrap:break-word;
    transform: translateY(-50%); 
}

Upvotes: 0

Views: 641

Answers (1)

Asons
Asons

Reputation: 87191

Remove the white-space: nowrap in this rule, preferable with a media query, or maybe all together

 .line-1{
     position: relative;
     top: 50%;  
     width: 5em;
     margin: 0 auto;
     border-right: 2px solid rgba(255,255,255,.75);
     font-size: 120%;
     text-align: left;
     /* white-space: nowrap;                removed this */
     overflow: hidden;
     max-width: 50em;
     word-wrap:break-word;
     transform: translateY(-50%); 
 }

Sample

.typo {
  margin-bottom: 20px;
}
.line-1 {
    position: relative;
    top: 50%;  
    width: 5em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 120%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    max-width: 50em;
    word-wrap:break-word;
    /*transform: translateY(-50%);    temp. removed */
}

.line-1b {
    position: relative;
    top: 50%;  
    width: 5em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 120%;
    text-align: left;
    /* white-space: nowrap;             */
    overflow: hidden;
    max-width: 50em;
    word-wrap:break-word;
    /*transform: translateY(-50%);    temp. removed */
}
<div class="typo" >
    <p class="line-1 anim-typewriter">text bla bla bla bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla    </p>
</div>   

<div class="typo" >
    <p class="line-1b anim-typewriter">text bla bla bla bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla   </p>
</div>

Updated based on a comment

When it comes to typewriter effects, they often use white-space: nowrap since many being a 1 line effect, so when screen narrows down one get issues.

Here is a post with a couple of options:

Upvotes: 1

Related Questions