html - 需要将环绕文字添加到我的 div

Question

大家好，我在文本区域上方有一个 div，它们的宽度相同，当我提交表单时，div 变宽了。如何使用自动换行保持相同的大小？谢谢？

CSS:

div.tarea {

background-color: #DDDDD0;
font-family: arial, sans-serif;
font-size: 10pt;
margin: 0px;
width: 100%;
height: 100px; 
overflow-y:auto;
border:2px grey solid;
}

HTML:

 <tr>
        <td colspan="4">
        <c:if test="${action == 'update'}">
        <%-- Preserve the indentation for this TEXTAREA in order to keep extra whitespace out of it. --%>
        <div class="tarea" name="mcRemarkOld" ><c:forEach var="mcbean" items="${form.mcRemarks}">--- ${mcbean.auditable.lastModifiedBy.firstName} ${mcbean.auditable.lastModifiedBy.lastName}, <fmt:formatDate value="${mcbean.auditable.lastModifiedDate}" pattern="${date_time_pattern}" />

        <br><br>${mcbean.remark} &nbsp;  
        <rbac:check operation="<%=Operation.ADMIN_UPDATE%>">
        <a class="edit_activity" href="show.edit_remarks?remarkId=${mcbean.id}&type=1&hotPartId=${form.hotPartId}"><img class="edit" src="../images/icon_edit.gif" border="0" alt="Edit"/></a>
        </rbac:check>

        <br>
        <br>
        </c:forEach></div><br/>
        </c:if>
            <rbac:check field="<%=Field.HOT_PARTS_SOR_REMARKS%>" display="none">
            <TEXTAREA tabindex="20" name="mcRemark" rows="7" cols="100" scrolling="auto" <c:if test="${not empty lock && !lock.locked && action != 'add'}">disabled="disabled"</c:if>>${form.mcRemark}</TEXTAREA>
            </rbac:check>
        </td>
    </tr>

Answer 1

您可以使用 CSS 属性 word-wrap。这应该适用于所有主流浏览器，根据:http://www.w3schools.com/cssref/css3_pr_word-wrap.asp .

div.tarea {
  background-color: #DDDDD0;
  font-family: arial, sans-serif;
  font-size: 10pt;
  margin: 0px;
  width: 100%;
  height: 100px; 
  overflow-y:auto;
  border:2px grey solid;
  word-wrap:break-word;
}