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

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

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

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

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

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

the div section

the text area

обновление: HTML-код

в CSS

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

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

83
css google-chrome textarea

4 ответов

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

textarea {
    resize: none;
}

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

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

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

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

Textarea изменение размера управления через CSS3 изменить размер свойства:

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

допустимые значения поясняющие:none (отключает изменение размера textarea),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>
16

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

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

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

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

1