Question

我在div中放置了两个元素，一个是textarea标签，另一个是时间标签。时间标签放在div上。当textarea的单词很少时，textarea标签和时间之间的空间很好。但是当textarea包含许多字符时，它会覆盖时间标记，如下图所示

我的挑战是，尽管时间标签中有多个字符，但我如何在textarea和时间标签之间动态保持距离。这是显示我的尝试的 CSS 代码

.messages textarea[readonly] {
  font-size: 15px;
  font-family: "Helvetica Neue";
  margin: 0 0 0.2rem 0;
  color: #000;
  word-wrap: break-word;
  resize: none;
  overflow: hidden;
  min-height: 5px;
  height: 1px;
  min-height: inherit;
  background: #c2dfff;
  margin-bottom: 0px;
  z-index: 10;
}

.messages time {
  font-size: 1.0rem;
  color: #696969;
  float: right;
  position: absolute;
  bottom: 10px;
  right: 0;
  z-index: 40;
  padding-right: 5px;
}

这是 HTML 视图

<div class="message">
  <textarea readonly elastic>{{ msg.Content }}</textarea>
  <time datetime="2009-11-13T20:00">{{ humanize(msg.Time) }}</time>
</div>

Answer 1

如果您不介意有时会在文本下方显示日期，那么这可能是一个解决方案：

https://jsfiddle.net/91czko52/1/

基本上，我们在paraghaph（幻影elem是黑色的＆gt;应该是透明的）中创建一个幻像:after元素，其具有相同的MAX日期大小（或者可能更多一点）。因此，文本永远不会触及日期。

注意：这也意味着使用了经典的＆＃39;段落元素而不是textarea：我希望并猜测你可能并不真正需要textarea。

Answer 2

一种可能的解决方案，通过复制日期和使用伪元素。 https://jsfiddle.net/jLo9rnfz/1/ 与上面类似，但没有使用最大宽度，这里总是有正确的宽度。无论你喜欢什么：）

＆＃13;

 /* Using a trick by duplicating the date you can keep the space to ensure no wrapping */
    
    .container {
        background: red;
        position: relative;
        line-height: 1.4;
    }
    
    .item {
        /* This ensure you always have the correct spave available and never wrap over the visible date */
        background: orange;
        color: transparent;
        word-break: keep-all;
        word-wrap: normal;
        white-space: nowrap;
    }
    
    .item::before {
        /* Here you have a duplicate date but this one is visible and correctly positioned 
        Adding the date to css can be done with js or php, google search will help you out there  */
        content: '5 days ago';
        position: absolute;
        color: black;
        right: 0;
    }

＆＃13;

 <div class="container">
     paragraph here to test wrappingparagraph here to test wrappingparagraph here to test wrappingparagraph here to test wrapping
      <span class="item">
        5 days ago
      </span>
    </div>

＆＃13;

Answer 3

还要考虑在显示类似行为的现有应用中查看完成方式（检查元素），例如WhatsApp web。

CSS：在Div

3 个答案: