textarea's wiersze i atrybut cols w CSS

154

Chciałbym ustawić textarea„s rowsoraz colsatrybutów poprzez CSS.

Jak mam to zrobić w CSS?

css styling ASD
źródło
Kiedy użyć które pytanie: stackoverflow.com/questions/3896537/…
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

Odpowiedzi:

107

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>
Sampson
źródło
12
Zgodnie z poniższą odpowiedzią użytkownika2928048, jeśli użyjesz „em” zamiast „px”, możesz określić szerokość i wysokość w znakach, tak jak w przypadku atrybutów „rows” i „cols”. Wydaje mi się, że działa nawet z IE6.
Swanny,
Chociaż zgadzam się z użyciem 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.
akinuri
Może się mylę, ale px nie działa dla mnie; oni zrobili.
Jesse Steele
309 
<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 .

user2928048
źródło
39
Aby być bardziej dokładny, trzeba wziąć 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.
nalply
2
@nalply, że twoje rozwiązanie jest poprawne. Problem polega na tym, że 4em = 4 x rozmiar czcionki, który nie bierze pod uwagę wypełnienia ani wysokości linii
Nicholas
3
Jeśli masz rozmiar pola właściwości: content-box; nie będziesz musiał martwić się o wypełnienie, więc pozostajesz tylko przy wysokości linii.
mikewasmike
2
Miło @nalply, dzięki za podejście. Dodając trochę do twojej odpowiedzi, funkcja calc () CSS3 może ułatwić obliczenia szerokości / wysokości: powiedzmy, że mam obszar tekstowy z padding-top i padding-bottom 4px i chcę, aby miał 3 rzędy wysokości, wysokość byłaby height: calc(3em + 8px);.
GBU
Chociaż 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 .
akinuri
16

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;
}
Code Monkey
źródło
4

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.

Moulde
źródło
1
CSS służy do stylizacji wizualnej reprezentacji elementu. Obejmuje to szerokość i wysokość obszaru tekstowego.
Sampson,
Nie są one takie same, przeglądarka uwzględnia wysokość tekstu w każdym wierszu, w tym 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.
William Isted
0

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>
Rozwiń fragment

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 .

akinuri
źródło