Перенос слов в input

431

26 декабря 2016, 23:02

Столкнулся с затруднением переноса в #textName,#textMail,#textMessage, печатает в одну строку до посинения. Знаю что textarea помогает с этим делом но выглядит не так как хотелось бы :( Какие есть способы добавить перенос?

.main-head form{ 
background-color: #ffffff; 
position: absolute; 
bottom: 0px; 
display: block; 
height: 390px; 
width: 375px; 
margin-left: 150px; 
box-shadow: 0px -20px 50px -10px #E0E0E0, 
           -20px 0px 50px -10px #E0E0E0, 
            20px 0px 50px -10px #E0E0E0; 
text-align: center; 
} 
#textName,#textMail,#textMessage {   
display: fixed; 
border:none; 
font-family: 'Open Sans', sans-serif; 
font-size: 15pt; 
outline: none; 
width: 295px; 
border-bottom-style: solid; 
border-bottom-color: #C7C7C7; 
border-bottom-width: 1.2px;      
} 
#textName{ 
margin-top: 35px; 
} 
#textMail{ 
margin-top: 30px; 
} 
#textMessage{ 
height: 95px; 
} 
 
form p{ 
font-family: 'Open Sans', sans-serif; 
text-align: center; 
font-size: 20pt; 
margin-top: 30px; 
}

<form action="server"> 
    <p><samp>Send</samp> A Message</p> 
    <input type="text" placeholder="Your name..." id="textName"> 
    <input type="text" placeholder="Your email..." id="textMail"> 
    <input type="text" placeholder="Your message..." id="textMessage"> 
    <input type="submit" value="Send Message" id="messageButton"> 
</form>

Answer 1

Попробуйте вместо инпутов однострочные textarea с плагином Autosize. Они будут выглядеть как инпуты, к которым добавляются строки при переносе или нажатии Enter.

autosize($('textarea'));

.main-head form{ 
background-color: #ffffff; 
position: absolute; 
bottom: 0px; 
display: block; 
height: 390px; 
width: 375px; 
margin-left: 150px; 
box-shadow: 0px -20px 50px -10px #E0E0E0, 
           -20px 0px 50px -10px #E0E0E0, 
            20px 0px 50px -10px #E0E0E0; 
text-align: center; 
} 
#textName,#textMail,#textMessage {   
display: fixed; 
border:none; 
font-family: 'Open Sans', sans-serif; 
font-size: 15pt; 
outline: none; 
width: 295px; 
border-bottom-style: solid; 
border-bottom-color: #C7C7C7; 
border-bottom-width: 1.2px;      
} 
#textName{ 
margin-top: 35px; 
} 
#textMail{ 
margin-top: 30px; 
} 
#textMessage{ 
height: 95px; 
} 
 
form p{ 
font-family: 'Open Sans', sans-serif; 
text-align: center; 
font-size: 20pt; 
margin-top: 30px; 
}

<form action="server"> 
    <p><samp>Send</samp> A Message</p> 
    <textarea rows="1" placeholder="Your name..." id="textName"></textarea> 
    <textarea rows="1" placeholder="Your email..." id="textMail"></textarea> 
    <textarea rows="1" placeholder="Your message..." id="textMessage"></textarea> 
    <input type="submit" value="Send Message" id="messageButton"> 
</form> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="http://www.jacklmoore.com/js/autosize.min.js"></script>