Как я могу предотвратить расширение текстовой области за пределы родительского элемента DIV? (только проблема с Google-Chrome)

Question

Как я могу предотвратить расширение текстовой области за пределы родительского элемента DIV?

У меня есть эта текстовая область внутри таблицы, которая находится внутри DIV, и кажется, что она вызывает растяжение всей таблицы за ее пределы..

Вы можете увидеть пример такой же ситуации даже в более простом случае, просто поместив текстовую область внутри div (например, что используется здесь на www.stackoverflow.com)

Из рисунков ниже видно, что текстовая область может простираться за пределы размера своего родителя?Как мне предотвратить это?

Я новичок в CSS, поэтому я не знаю, какие атрибуты CSS мне следует использовать.Я пробовал несколько таких как display и overflow .Но они, кажется, не делают трюк.Что-нибудь еще, что я мог пропустить?

ОБНОВЛЕНИЕ: HTML

CSS

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

Если вы поместите этот код в http://jsfiddle.net,, вы увидите, что они действуют по-другому.Хотя текстовое поле ограничено процентом, объявленным в его стиле css, все же можно заставить его сделать так, чтобы его родительская таблица была настолько большой, насколько она хочет, и тогда вы увидите, что она выходит за пределы родительской границы.Есть мысли о том, как это исправить?

Answer 1

Чтобы полностью отключить изменение размера:

textarea {
    resize: none;
}

Или вы можете ограничить размер:

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

Чтобы ограничить размер по ширине и / или высоте родителей:

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

Answer 2

Управление изменением размера текстовой области доступно через CSS3 свойство изменения размера :

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

Допустимые значения говорят сами за себя: none (отключает изменение размера текстовой области), both, vertical и horizontal.

Обратите внимание , что в Chrome, Firefox и Safari значением по умолчанию является both.

Если вы хотите ограничить ширину и высоту элемента textarea, это не проблема: эти браузеры также учитывают свойства max-height, max-width, min-height и min-width CSS, чтобы обеспечить изменение размера в определенных пропорциях .

Пример кода :

#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>

Answer 3

Я надеюсь, что у вас та же проблема, что и у меня ... моя проблема была проста: создать фиксированную текстовую область с заблокированным процентом внутри контейнера (я новичок в CSS / JS / HTML, так что терпите меня, если я не получу правильный язык), чтобы независимо от того, на каком устройстве оно отображалось, поле, заполняющее контейнер (ячейка таблицы), занимало правильное количество места. Вот как я это решил:

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

Тогда CSS выглядит так ...

#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;
}

Извините за неаккуратный блок кода, но мне пришлось показать вам, что важно, и я не знаю, как вставить цитируемый код CSS на этом сайте. В любом случае, чтобы убедиться, что вы понимаете, о чем я говорю, важный CSS здесь не с отступом ...

То, что я тогда сделал (как показано здесь), очень точно настроил проценты, пока не нашел те, которые отлично работали, чтобы соответствовать дисплею, независимо от того, какой экран устройства используется.

Конечно, я думаю, что "изменить размер: нет;" это излишне, но лучше, чем потом сожалеть, и теперь у потребителей не будет никакого способа изменить размер окна, равно как и не будет иметь значения, с какого устройства они его просматривают.

Отлично работает.

Answer 4

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

назначьте необходимую ширину и высоту для текстовой области, а затем используйте. resize: none; css свойство, которое отключит растягиваемое свойство текстовой области.