html - 我将如何更改元素的内容溢出

Question

我想做什么？

我为我的文本区域创建了一个自定义页脚。并想改变我的文本区域的内容溢出。这样文本就永远不会超出我的文本区域的页脚。

https://imgur.com/hOfqRQ7

正如您在图片中看到的那样，文本超出了我的文本区域的页脚(水平线是页脚开始的地方)。我将如何防止它？这样文本在到达页脚之前就开始溢出。

我的代码:

#message textarea {
  resize: none;
  min-height: 250px;
  padding-bottom: 45px;
  overflow: hidden;
}

#sendMsg #separator hr {
  margin-top: -35px;
}

#sendMsg #contactFormBtn,
#showContactErrMsg {
  position: absolute;
  margin-top: -30px;
}

#sendMsg #showContactErrMsg {
  padding-left: 40px;
  font-size: 12px;
}

#showContactErrMsg {
  font-size: 14px;
  color: maroon;
  font-family: "Century Gothic";
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row" id="message">
  <div class="col-xs-offset-1 col-xs-10">
    <div class="form-group">
      <label class="formLabel"><i class="fa fa-sticky-note-o"></i> Message </label>
      <textarea class="form-control" class="formInput" id='inputContactMsg'></textarea>
      <div class="row" id='sendMsg'>
        <div class="row" id='separator'>
          <div class="col-xs-offset-2 col-xs-8">
            <hr style="height: 0.5px; background-color: silver;">
          </div>
        </div>
        <div class="col-xs-8">
          <strong id='showContactErrMsg'></strong>
        </div>
        <div class="col-xs-4">
          <button type="submit" id='contactFormBtn'>Send</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

在 #message textarea 中更改以下代码

max-height: 250px; /*max instead of min*/
overflow: auto;/*scroll or auto instead of hidden*/

一旦高度达到您的设定值，这将强制您的文本区域滚动。

希望这有帮助:)

#message textarea { 
		resize: none; 
		max-height: 250px; /*change this to max*/
		padding-bottom: 45px; 
		overflow: auto;/*change this to scroll*/
    height: 90px;
    width: 100%;
    border: none;
}
 
#message textarea:focus{
  border: none;
  outline: none;
}

#sendMsg #separator hr { 
  margin-top: -35px; 
}

#sendMsg #contactFormBtn, #showContactErrMsg { 
  position: absolute; 
  margin-top: -30px; 
}

#sendMsg #showContactErrMsg { 
  padding-left: 40px; 
  font-size: 12px;
}

#showContactErrMsg { 
  font-size: 14px; 
  color: maroon; 
  font-family: "Century Gothic"; 
}
  
div .extra {
  height: 130px;
  display: block;
  overflow: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row" id="message">
  <div class="col-xs-offset-1 col-xs-10">
    <div class="form-group">
      <label class="formLabel"><i class="fa fa-sticky-note-o"></i> Message         </label>
      <div class="extra form-control">
        <textarea class="" class="formInput" id='inputContactMsg'></textarea>
      </div>
      <div class="row" id='sendMsg'>
      <div class="row" id='separator'>
      <div class="col-xs-offset-2 col-xs-8">
        <hr style="height: 0.5px; background-color: silver;">
      </div>
    </div>
    <div class="col-xs-8">
      <strong id='showContactErrMsg'></strong>
    </div>
    <div class="col-xs-4">
      <button type="submit" id='contactFormBtn'>Send</button>
    </div>
    </div>
    </div>
  </div>
</div>

编辑:将 textarea 添加到一个 div 中并赋予它 class="extra"。