CODEWITHSUNDEEP
htmlcss
yalpsid
yalpsid

Reputation: 235

The second text in <span> goes to another line

How do I display "Confirm Password" in a single line ?

I add an <span id="confirm">Confirm Password</span> and I did this, doesn't work:

#confirm {
  display: inline;
} 


* {
    margin: 0px;
    padding: 0px;
}

body {
  background-color: Royalblue; /*#f0f0f0;*/
}

.head {
    text-align: center;
    border: 1px solid #B0C4DE;
    border-bottom: none;
    border-radius: 10px 10px 0px 0px;   
    padding: 20px;
    background: rgba(0, 250, 0, 0);
    color:   #FFFACD; 
    font-family: 'Cinzel', sans-serif; 
    font-size:30px;
}

.content {
  position:relative; 
  top:8px;
  width: 30%;
  margin: 50px 
  auto 0px;


}

form {
  position: relative;  
  margin-top: 0;
  margin-left: 0;
  width: 89%;
  height: 300px;

  padding: 20px;
  border: 1px solid #B0C4DE;
  background: rgba(0, 250, 0, 0);   
  border-radius: 0px 0px 10px 10px;
 
}

label {
  position: relative;
  font-family: 'Montserrat', sans-serif; 
  font-size: 14px;
  z-index: -1;
  border: 0; 
  color: white; 
  left: -65%;
  top: -30px;
}



.username {
  position: relative;
  top: 65px;   
}

.password {
  position: relative;
  top: 130px;   
}

.con-pass {
  position: relative;
  top: 195px;   
}

#confirm {
 display: inline;
} 

input {
  position: absolute;
  font-family: 'Montserrat', sans-serif;
  border: 0; 
  border-bottom: 2px solid beige;
  background: transparent;
  font-size: 15px;                     /*BORDER yes/no*/
  height: 25px; 
  width: 250px;
  outline: 0; 
  z-index: 1;
  left: -74px;
  top: -30px; 
}


span {
  position: absolute;
  top: 5px;
  left: -6px;
  transition: top .5s ease, font-size .5s ease; 
}

input:focus + label > span,
input:valid + label > span {
  top: -20px;
  font-size: 11px;
 /* padding-bottom: 15px;*/ 
}

label::after {
  content: '';
  position: absolute;
  top: 27px;            /* ::after position */
  left: -7px;
  width: 250px; 
  height: 23px;
  border-radius: 2px;
  transition: transform .3s;
}

label::after {
  z-index: -1;
  background: beige; /*#a86bf;*/   
  transform: scale3d(1, 0, 1);
  transform-origin: top;
}

input:focus + label::after,
input:valid + label::after {
  transform: scale3d(1, -1.3, 1);
  transition-timing-function: linear;
  top: 27px;            /* ::after position */
}


input:focus {
  border-radius: 2px;
}
 <div class="content">
      
      <p class="head">Register</p>

        <form>

            <div class="content"> 
     
                  <div class="email">
                    <input type="text" id="email" required /> <!--input field-->
                    <label for="email"><span>Email</span></label>
                  </div>

                  <div class="username">
                    <input type="text" id="user" required />  
                    <label for="user"><span>Username</span></label>
                  </div>

                  <div class="password">
                    <input type="text" id="pass" required /> <!--input field-->
                    <label for="pass"><span>Password</span></label>
                  </div>

                  <div class="con-pass">
                    <input type="text" id="c-pass" required />  
                    <label for="c-pass"><span id="confirm">Confirm Password</span></label>
                  </div>    

             </div>

        </form>

      </div>

Upvotes: 1

Views: 84

Answers (3)

Poul Bak
Poul Bak

Reputation: 10929

You can also insert a &nbsp; in your html. That will ensure the two Words are kept on the same line:

<label for="c-pass"><span id="confirm">Confirm&nbsp;Password</span></label>

Upvotes: 1

Thomas Lombart
Thomas Lombart

Reputation: 433

You can use white-space: nowrap; for that : 

#confirm {
  white-space: nowrap;
}

Here is a resource for the white-space property in CSS.

Upvotes: 3

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

Use white-space: nowrap; for class con-pass

Upvotes: 1

Related Questions