带有注释框的文本溢出

Question

我将 PHP 拉入一个表单，并为实际消息放入了一些虚拟数据，这样我就可以弄乱长度了。

我需要的答案是 CSS，因为我往往有不好的做法，并且确实可以通过一些帮助来改进。

所以评论有图片、发件人姓名、发布日期和消息。我将在下面显示它的图像。

我遇到的唯一问题是我的一段很长的标签中的文本包含在div 内，但文本位于注释下方（如下所示）。

请我提供一些关于如何有效地使评论框大小随文本增长的提示。

这是我的代码：

% for comment in comments %}
<div id="comment-list">
   <div class="individual-comments">
       <div class="comment-user">
          Sent by: {{comment.senderName}} <br>
          <img src="{{ asset('img/no-user.png') }}" width="50px" height= "50px" alt="User Image">
       </div>                
       <div class="comment-desc">
          <p>Text messaging, or texting, is the act of composing and sending electronic messages</p>
       </div>                 
       <div class="comment-time">
          On: {{comment.dateCreated|date("m/d/Y")}}
       </div>
    </div>
</div>
{% endfor %}

---

.individual-comments {
  width: 700px;
  height: 80px;
  border: 0.5px solid #000000;
  margin: auto;
  text-align: left;
  position: relative;
  margin-bottom: 15px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 5px #000000;
}

.comment-desc {
  width: 613px;
  height: 50px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  font-size: 12px;
  color: #000000;
  padding-top: 50px;
  letter-spacing: 1px;
  text-overflow: ellipsis;
}

.comment-time {
  text-align: left;
  float: right;
  padding: 5px;
  margin-right: 10px;
  color: #000000;
}

.comment-user {
  text-align: left;
  float: left;
  padding: 5px;
  color: #000000;
}

Answer 1

你的问题是你使用了错误的定位方式。

您的.comment-user 类是relative，您的.comment-time 也是如此，但您的.comment-desc 是absolute，这会导致混淆。

在使用动态时，您还应避免使用固定样式值 元素。

.individual-comments 上的固定高度会强制 div 从不调整大小。 .comment-desc也是一样。

下面是一个更好的布局示例，容器使用display: flex。 另一种解决方案是将float: left 用于.comment-user、.comment-desc 和.comment-time 以及% 宽度（例如20%、70%、10%）。但同样，使用动态数据更适合自适应布局（flex 也是如此！）。

所有的cmets都是我留下来演示的无用代码。

.individual-comments{
    width: 700px;
    /* height: 80px; useless */
    border: 0.5px solid #000000;
    margin: auto;
    text-align: left;
    position: relative;
    margin-bottom: 15px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 5px #000000;
    display: flex;
    flex-direction: row;
}

.comment-desc{
    /* width: 613px;
    height: 50px; */
    position: relative;
    /* bottom: 0px;
    right: 0px; */
    font-size: 12px;
    color: #000000;
    padding-top: 25px;
    padding-right: 10px;
    letter-spacing: 1px;
    /* text-overflow: ellipsis; */
    flex: 1;
}

.comment-time{
    text-align: left;
    float: right;
    padding: 5px;
    /* margin-right: 10px; */
    color: #000000;
    position: absolute;
    right: 10px;
}

.comment-user{
    text-align: left;
    float: left;
    padding: 5px;
    color: #000000;
}

<div id="comment-list">
   <div class="individual-comments">
       <div class="comment-user">
          Sent by: testuser <br>
          <img src="" width="50px" height= "50px" alt="User Image">
       </div>                
       <div class="comment-desc">
          <p>Text messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messages Text messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messages Text messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messages</p>
       </div>                 
       <div class="comment-time">
          On: date
       </div>
    </div>
</div>

编辑：

我在 .comment-time 上使用了 position: absolute 来允许评论文本占据所有正确的空间。如果我使用相对定位，.comment-desc 会被 .comment-time 的宽度截断。