Odpowiedzi:
widthi heightsą używane podczas wybierania trasy CSS.
<!DOCTYPE html>
<html>
<head>
<title>Setting Width and Height on Textareas</title>
<style>
.comments { width: 300px; height: 75px }
</style>
</head>
<body>
<textarea class="comments"></textarea>
</body>
</html>emdo określenia wysokości, wątpię, czy można go użyć do określenia szerokości. To może pracować z czcionek o stałej szerokości (po zastanawianie się proporcji szerokości do wysokości znaków i modyfikowania wartości szerokości odpowiednio), i to wszystko. Z wyjątkiem monospace, szerokości znaków nie są stałe, więc nie sądzę, emczy colsatrybut może pomóc przy określaniu szerokości.
<textarea rows="4" cols="50"></textarea>Odpowiada:
textarea {
height: 4em;
width: 50em;
}gdzie 1em odpowiada aktualnemu rozmiarowi czcionki, więc obszar tekstowy powinien mieć szerokość 50 znaków. zobacz tutaj .
paddingi line-heightna koncie. Powiedzmy, że masz dopełnienie pół em na górze i na dole i wysokość linii 1,2 em, wtedy wysokość dla 4 rzędów będzie wynosić 1 + 4 * 1,2 = 5,8 em.
height: calc(3em + 8px);.
rowsatrybut jest (nieco) niezawodny, nie polegałbym na colsatrybucie, chyba że używam czcionek o stałej szerokości w obszarze tekstu. Zobacz zaktualizowane skrzypce @ AlexanderScholz .
Myślę, że nie możesz. Zawsze wybieram wysokość i szerokość.
textarea{
width:400px;
height:100px;
}fajną rzeczą w robieniu tego w stylu CSS jest to, że możesz go całkowicie zmienić. Teraz możesz dodać takie rzeczy jak:
textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}O ile wiem, nie możesz.
Poza tym to i tak nie jest to, do czego służy CSS. CSS służy do stylizacji, a HTML do znaczników.
line-height, paddingna pojemniku (nie obliczając wysokość na podstawie box-sizing), nawet biorąc pod uwagę różne proporcje czcionek stosowanych w celu zapewnienia wyświetlaczach tekstowym numer zestawu wierszy tekstu, których nie można uzyskać za pomocą wysokości css.
Chciałem tylko opublikować demo przy użyciu funkcji calc () do ustawiania wierszy / wysokości, ponieważ nikt tego nie zrobił.
body {
/* page default */
font-size: 15px;
line-height: 1.5;
}
textarea {
/* demo related */
width: 300px;
margin-bottom: 1em;
display: block;
/* rows related */
font-size: inherit;
line-height: inherit;
padding: 3px;
}
textarea.border-box {
box-sizing: border-box;
}
textarea.rows-5 {
/* height: calc(font-size * line-height * rows); */
height: calc(1em * 1.5 * 5);
}
textarea.border-box.rows-5 {
/* height: calc(font-size * line-height * rows + padding-top + padding-bottom + border-top-width + border-bottom-width); */
height: calc(1em * 1.5 * 5 + 3px + 3px + 1px + 1px);
}<p>height is 2 rows by default</p>
<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<p>height is 5 now</p>
<textarea class="rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<p>border-box height is 5 now</p>
<textarea class="border-box rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>Jeśli użyjesz dużych wartości dopełnień (np. Większych niż 0.5em), zaczniesz widzieć tekst, który przepełnia obszar zawartości (-boks), co może prowadzić do pomysłu, że wysokość nie jest dokładnie x wierszy ( że ustawiłeś), ale tak jest. Aby zrozumieć, co się dzieje, możesz zajrzeć do sekcji Model pudełkowy i strony z rozmiarami pudełek .