Как я могу предотвратить распространение текстового поля за пределы его родительского элемента DIV? (только для google-chrome)

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

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

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

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

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

UPDATE: HTML

CSS

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

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

Ответ 1

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

textarea {
    resize: none;
}

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

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

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

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

Ответ 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, это не проблема: эти браузеры также уважают свойства CSS max-height, max-width, min-height и min-width для обеспечения изменения размера в определенных пропорциях.

Пример кода:

#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

Я надеюсь, что у вас будет та же проблема, что и у меня... моя проблема была простой: сделайте фиксированную текстовую область с заблокированными процентами внутри контейнера (я новичок в 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 здесь меньше отступов...

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

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

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

Ответ 4

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

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