Why is my css text is only 1 line and overflowing?-CodePudding

@-webkit-keyframes typing {
  from {
    width: 0;
  }
}

@-webkit-keyframes blink-caret {
  50% {
    border-color: transparent;
  }
}

h1 {
  overflow-wrap: break-word;
  width: 335px;
  float: left;
  overflow: hidden;
  padding-left: 5px;
  font: bold 300% Consolas, Monaco, monospace;
  border-right: .1em solid black;
  width: 1000.5em;
  margin: 2em 1em;
  white-space: nowrap;
  overflow: hidden;
  -webkit-animation: typing 30s steps(2001, end), blink-caret 5s step-end infinite alternate;
}

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vestibulum lectus ut lacus scelerisque dapibus. Fusce sed purus augue. Aenean massa nunc, efficitur semper eros ut, maximus malesuada neque. Fusce in lorem et tellus ultrices porttitor. Aenean
    egestas, sapien a elementum fringilla, nibh tortor vestibulum ex, vel maximus tortor lorem quis mauris.</h1>
</body>

</html>

Sorry, I am a newbie and I don't know why is it overflowing. Can someone help me to stop that? I tried to display inline-block and a few other things that I found on the internet but nothing worked

CodePudding user response：

For starters you have width defined twice - the second one being width: 1000.5em; which is much wider than the screen. Remove that.

The text won't wrap if you have white-space set to nowrap;. Remove that rule as well. That should do it.

CodePudding user response：

You can use width:100% instead of 1000.5em.

h1 {
  overflow: hidden; 
  border-right: .1em solid black;
  font: bold 300% Consolas, Monaco, monospace;
  word-wrap: break-word;
  margin: 0 auto; 
  letter-spacing: .15em;
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
}

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vestibulum lectus ut lacus scelerisque dapibus. Fusce sed purus augue. Aenean massa nunc, efficitur semper eros ut, maximus malesuada neque. Fusce in lorem et tellus ultrices porttitor. Aenean
    egestas, sapien a elementum fringilla, nibh tortor vestibulum ex, vel maximus tortor lorem quis mauris.</h1>
</body>

</html>

CodePudding user response：

Vanilla CSS

uses the last error free defined property in a rule when the property is entered more than once in the same rule
uses the browser font-size settings as default for html/root font-size, which is usually 16px in most browsers
em uses the parent font-size as multiplier

width is defines twice in your h1 { ... }, so the final width used will be 1000.5em.

Doing the calculations for the total element width:

300% of default 16px font-size times 1000.5em yields a 48024px for the total element width at font-size: 48px

The given <h1> text fits the calculated width, hence no wrapping will occur. For reference a regular desktop computer has 1920px viewport width.

CodePudding user response：

It is due to the whitespace:nowrap property in your CSS file. It converts the text into a single line causing overflow of the text. I hope it helps!