'changing the width of h1

I have this code below that allows the text to fade in nicely. However, as you can see when I run it below, it doesn't show the entire text specified in the h1. So i am a little confused on how to fix this, because looking at the css, it is not specifying where the width of the div or h1 actually is.

var spanText = function spanText(text) {
    var string = text.innerText;
    var spaned = '';
    for (var i = 0; i < string.length; i++) {
        if(string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1);
        else spaned += '<span>' + string.substring(i, i + 1) + '</span>';
    }
    text.innerHTML = spaned;
}

var headline = document.querySelector("h1");
spanText(headline);

@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');
body {
    margin: 0;
    padding: 0;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Oswald', helvetica;
    background-color: #333;
    color: #fff;
    height: 100vh;
    font-size: 30px;
}
.container h1 span {
    letter-spacing: 3px;
    font-weight: 300;
    display: inline-block;
    opacity: 0;
    text-transform: uppercase;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transition-timing-function: ease-out;
}
.container h1 span:nth-child(1) {
    animation-delay: 0.2s;
    animation-name: fadeInLeft;
}
.container h1 span:nth-child(2) {
    animation-delay: 0.4s;
    animation-name: fadeInLeft;
}
.container h1 span:nth-child(3) {
    animation-delay: 0.6s;
    animation-name: fadeInLeft;
}
.container h1 span:nth-child(4) {
    animation-delay: 0.8s;
    animation-name: fadeInLeft;
}
.container h1 span:nth-child(5) {
    animation-delay: 1s;
    animation-name: fadeInLeft;
}
.container h1 span:nth-child(10) {
    animation-delay: 0s;
    animation-name: fadeInRight;
}
.container h1 span:nth-child(9) {
    animation-delay: 0.2s;
    animation-name: fadeInRight;
}
.container h1 span:nth-child(8) {
    animation-delay: 0.4s;
    animation-name: fadeInRight;
}
.container h1 span:nth-child(7) {
    animation-delay: 0.6s;
    animation-name: fadeInRight;
}
.container h1 span:nth-child(6) {
    animation-delay: 0.8s;
    animation-name: fadeInRight;
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(10%, 30%, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-10%, -30%, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

<div class="container"> 
    <h1>
        Superrr Coool
    </h1>
</div>

does anybody have any ideas how to possibly fix this?

Solution 1:^[1]

This has nothing to do with the width of the h1, but with your CSS animations: You are defining fade-ins for 10 spans, but you have 12 of them, so the 11th and 12th remain invisible - see below, where I added selectors for them to the rule for the 10th child span:

var spanText = function spanText(text) {
  var string = text.innerText;
  var spaned = '';
  for (var i = 0; i < string.length; i++) {
    if(string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1);
    else spaned += '<span>' + string.substring(i, i + 1) + '</span>';
  }
  text.innerHTML = spaned;
}


var headline = document.querySelector("h1");

spanText(headline);

@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');
                body {
                margin: 0;
                padding: 0;
                }
                .container {
                display: flex;
                justify-content: center;
                align-items: center;
                font-family: 'Oswald', helvetica;
                background-color: #333;
                color: #fff;
                height: 100vh;
                font-size: 30px;
                }
                .container h1 span {
                letter-spacing: 3px;
                font-weight: 300;
                display: inline-block;
                opacity: 0;
                text-transform: uppercase;
                animation-duration: 1.5s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                transition-timing-function: ease-out;
                }
                .container h1 span:nth-child(1) {
                animation-delay: 0.2s;
                animation-name: fadeInLeft;
                }
                .container h1 span:nth-child(2) {
                animation-delay: 0.4s;
                animation-name: fadeInLeft;
                }
                .container h1 span:nth-child(3) {
                animation-delay: 0.6s;
                animation-name: fadeInLeft;
                }
                .container h1 span:nth-child(4) {
                animation-delay: 0.8s;
                animation-name: fadeInLeft;
                }
                .container h1 span:nth-child(5) {
                animation-delay: 1s;
                animation-name: fadeInLeft;
                }
                .container h1 span:nth-child(10),
                .container h1 span:nth-child(11),
                .container h1 span:nth-child(12) {
                animation-delay: 0s;
                animation-name: fadeInRight;
                }
                .container h1 span:nth-child(9) {
                animation-delay: 0.2s;
                animation-name: fadeInRight;
                }
                .container h1 span:nth-child(8) {
                animation-delay: 0.4s;
                animation-name: fadeInRight;
                }
                .container h1 span:nth-child(7) {
                animation-delay: 0.6s;
                animation-name: fadeInRight;
                }
                .container h1 span:nth-child(6) {
                animation-delay: 0.8s;
                animation-name: fadeInRight;
                }
                @keyframes fadeInRight {
                0% {
                    opacity: 0;
                    transform: translate3d(10%, 30%, 0);
                }
                100% {
                    opacity: 1;
                    transform: translate3d(0, 0, 0);
                }
                }
                @keyframes fadeInLeft {
                0% {
                    opacity: 0;
                    transform: translate3d(-10%, -30%, 0);
                }
                100% {
                    opacity: 1;
                    transform: translate3d(0, 0, 0);
                }
                }

<div class="container"> 
        <h1>
            Superrr Coool
        </h1>
      </div>

Solution 2:^[2]

You did not include enough :nth-child elements in your animation. I changed the last one you had, I believe was 10, to the proper number -> 12.

I figured this out by inspecting the browser inspector and looking at how many span tags were being created by your JS function. I then went back and replaced the last span CSS animation from 10 to 12 and worked backward down the line changing each one down the line...

I also added the proper amount of animations and animation duration for 5, 6 and 7 respectively though you may want to play around with those on your end.

var spanText = function spanText(text) {
  var string = text.innerText;
  var spaned = '';
  for (var i = 0; i < string.length; i++) {
    if (string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1);
    else spaned += '<span>' + string.substring(i, i + 1) + '</span>';
  }
  text.innerHTML = spaned;
}


var headline = document.querySelector("h1");

spanText(headline);

@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');
body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Oswald', helvetica;
  background-color: #333;
  color: #fff;
  height: 100vh;
  font-size: 30px;
}

.container h1 span {
  letter-spacing: 3px;
  font-weight: 300;
  display: inline-block;
  opacity: 0;
  text-transform: uppercase;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transition-timing-function: ease-out;
}

.container h1 span:nth-child(1) {
  animation-delay: 0.2s;
  animation-name: fadeInLeft;
}

.container h1 span:nth-child(2) {
  animation-delay: 0.3s;
  animation-name: fadeInLeft;
}

.container h1 span:nth-child(3) {
  animation-delay: 0.4s;
  animation-name: fadeInLeft;
}

.container h1 span:nth-child(4) {
  animation-delay: 0.6s;
  animation-name: fadeInLeft;
}

.container h1 span:nth-child(5) {
  animation-delay: .7s;
  animation-name: fadeInLeft;
}

.container h1 span:nth-child(6) {
  animation-delay: .9s;
  animation-name: fadeInLeft;
}

.container h1 span:nth-child(7) {
  animation-delay: 1s;
  animation-name: fadeInLeft;
}

.container h1 span:nth-child(12) {
  animation-delay: 0s;
  animation-name: fadeInRight;
}

.container h1 span:nth-child(11) {
  animation-delay: 0.2s;
  animation-name: fadeInRight;
}

.container h1 span:nth-child(10) {
  animation-delay: 0.4s;
  animation-name: fadeInRight;
}

.container h1 span:nth-child(9) {
  animation-delay: 0.6s;
  animation-name: fadeInRight;
}

.container h1 span:nth-child(8) {
  animation-delay: 0.8s;
  animation-name: fadeInRight;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(10%, 30%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-10%, -30%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

<div class="container">
  <h1>
    Superrr Coool
  </h1>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Johannes
Solution 2	dale landry

'changing the width of h1

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]