Jak mogę zapobiec rozciągnięciu się obszaru textarea poza jego macierzysty element DIV? (tylko problem z Google Chrome)


100

Jak mogę zapobiec rozciągnięciu się obszaru textarea poza jego nadrzędny element DIV?

Mam ten obszar tekstowy wewnątrz tabeli, która jest wewnątrz DIV i wydaje się, że powoduje to, że cała tabela wyciąga się poza jej granice.

Możesz zobaczyć przykład tej samej sytuacji, nawet w prostszym przypadku, po prostu umieszczając obszar tekstowy wewnątrz elementu div (tak jak w przypadku www.stackoverflow.com)

Na poniższych obrazkach widać, że obszar tekstu może rozciągać się poza rozmiar swojego rodzica? Jak temu zapobiec?

Jestem trochę nowy w CSS, więc tak naprawdę nie wiem, jakich atrybutów CSS powinienem używać. Próbowałem kilku, takich jak wyświetlacz i przepełnienie . Ale wydaje się, że nie działają. Coś jeszcze mogłem przegapić?

sekcja div

obszar tekstowy

AKTUALIZACJA: HTML

CSS

textarea {
    max-width: 50%;
}
#container {
    width: 80%;
    border: 1px solid red;
}    
#cont2{
    width: 60%;
    border: 1px solid blue;
} 

Jeśli umieścisz ten kod wewnątrz http://jsfiddle.net , zobaczysz, że działają one inaczej. Chociaż obszar tekstowy jest ograniczony do wartości procentowej zadeklarowanej w jego stylu css, nadal można go zmusić, aby sprawił, że jego tabela nadrzędna była tak duża, jak chce, a następnie widać, że rozlewa się poza obramowanie nadrzędne. Jakieś przemyślenia, jak to naprawić? Wcześniejsze


2
@Makoto - zobacz datę opublikowania tego pytania.
Itay Levin

Odpowiedzi:


171

Aby całkowicie wyłączyć zmianę rozmiaru:

textarea {
    resize: none;
}

Aby zezwolić tylko na zmianę rozmiaru w pionie:

textarea {
    resize: vertical;
}

Aby zezwolić tylko na zmianę rozmiaru w poziomie:

textarea {
    resize: horizontal;
}

Lub możesz ograniczyć rozmiar:

textarea {
    max-width: 100px; 
    max-height: 100px;
}

Aby ograniczyć rozmiar do szerokości i / lub wysokości rodziców:

textarea {
    max-width: 100%; 
    max-height: 100%;
}

2
czy nadal mogę mieć dostępne ręczne rozciąganie, tylko ograniczyć rozciąganie w granicach elementu nadrzędnego?
Itay Levin

Czy to atrybut CSS? nie jest ważny w css 2.1
Itay Levin

Tak, to atrybut CSS, ale nie zostanie zweryfikowany. Zaktualizowałem również moją odpowiedź.
Māris Kiseļovs

Zastanawiam się, czy ifi mógłby sprawić, że będzie działać również z szerokością jako procentem, a nie ze stałą liczbą pikseli. ponieważ chcę umożliwić użytkownikowi zmianę rozmiaru obszaru tekstowego, ale nie chcę rozbić struktury ekranu.
Itay Levin

10
Ustawienie maksymalnej szerokości jako wartości procentowej działa dobrze - jsfiddle.net/paGE3 . Przy okazji, zaakceptuj moją odpowiedź, jeśli działa.
Māris Kiseļovs

19

Kontrolka zmiany rozmiaru Textarea jest dostępna za pośrednictwem właściwości resize CSS3 :

textarea { resize: both; } /* none|horizontal|vertical|both */
textarea.resize-vertical{ resize: vertical; }
textarea.resize-none { resize: none; }

Dopuszczalne wartości są oczywiste: none(wyłącza zmianę rozmiaru obszaru tekstu) both, verticali horizontal.

Zwróć uwagę, że w przeglądarkach Chrome, Firefox i Safari wartością domyślną jest both.

Jeśli chcesz ograniczyć szerokość i wysokość elementu textarea, że nie jest to problem: te przeglądarek również przestrzegać max-height, max-width, min-heightoraz min-widthwłaściwości CSS w celu zapewnienia zmiany rozmiaru w określonych proporcjach.

Przykład kodu :

#textarea-wrapper {
  padding: 10px;
  background-color: #f4f4f4;
  width: 300px;
}

#textarea-wrapper textarea {
  min-height:50px;
  max-height:120px;
  width: 290px;
}

#textarea-wrapper textarea.vertical { 
  resize: vertical;
}
<div id="textarea-wrapper">
  <label for="resize-default">Textarea (default):</label>
  <textarea name="resize-default" id="resize-default"></textarea>
  
  <label for="resize-vertical">Textarea (vertical):</label>
  <textarea name="resize-vertical" id="resize-vertical" class="vertical">Notice this allows only vertical resize!</textarea>
</div>


3
Sprawdziłem to pole komentarza, w którym piszę; S / O używa resize:vertical:) Wydaje się, że jest to „poprawne” rozwiązanie, jeśli chcesz zmienić rozmiar w pionie tak bardzo, jak chcesz!
mjohnsonengr

1

Mam nadzieję, że masz ten sam problem, że ja miałem ... mój problem był prosty: Zrób stałą textarea z zablokowanymi procentach wewnątrz pojemnika (jestem nowy w CSS / JS / HTML, więc pokrywa się ze mną, gdybym nie zrozumcie poprawnego żargonu), aby bez względu na urządzenie, na którym się wyświetla, pudełko wypełniające pojemnik (komórka stołu) zajmowało odpowiednią ilość miejsca. Oto jak to rozwiązałem:

<table width=100%>
    <tr class="idbbs">
        B.S.:
    </tr></br>
    <tr>
        <textarea id="bsinpt"></textarea>
    </tr>
</table>

Wtedy CSS wygląda tak ...

#bsinpt
{
    color: gainsboro;
    float: none;
    background: black;
    text-align: left;
    font-family: "Helvetica", "Tahoma", "Verdana", "Arial Black", sans-serif;
    font-size: 100%;
  position: absolute;
  min-height: 60%;
  min-width: 88%;
  max-height: 60%;
  max-width: 88%;
  resize: none;
    border-top-color: lightsteelblue;
    border-top-width: 1px;
    border-left-color: lightsteelblue;
    border-left-width: 1px;
    border-right-color: lightsteelblue;
    border-right-width: 1px;
    border-bottom-color: lightsteelblue;
    border-bottom-width: 1px;
}

Przepraszam za niechlujny blok kodu, ale musiałem ci pokazać, co jest ważne i nie wiem, jak wstawić cytowany kod CSS na tej stronie. W każdym razie, aby upewnić się, że wiesz, o czym mówię, ważne CSS jest tutaj mniej wcięte ...

To, co wtedy zrobiłem (jak pokazano tutaj), to bardzo precyzyjne dostosowanie wartości procentowych, aż znalazłem te, które działały idealnie, aby dopasować wyświetlacz, bez względu na używany ekran urządzenia.

To prawda, myślę, że „zmień rozmiar: brak”; to przesada, ale lepiej bezpieczne niż przykro, a teraz konsumenci i tak nie będą musieli zmieniać rozmiaru pudełka ani nie będzie miało znaczenia, z jakiego urządzenia go oglądają.

Działa świetnie.


Twój kod HTML jest nieprawidłowo sformatowany. TR potrzebuje TD.
KeyOfJ

0
textarea {
width: 700px;  
height: 100px;
resize: none; }

przypisz wymaganą szerokość i wysokość do obszaru tekstu, a następnie użyj. resize: none; css, która wyłącza rozciągliwą właściwość textarea.


To to samo, co główna odpowiedź.
Lorenz Meyer
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.