带有评论框的文本溢出

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 class 是 relative，您的 .comment-time 也是，但是您的 .comment-desc 是 absolute，这会导致混淆。

Also you should avoid fixed styles values when working with dynamic elements.

您在 .individual-comments 上的固定高度会强制 div 永远不会调整大小。 .comment-desc.

也是一样

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

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

.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 来允许评论文本完全正确 space。如果我使用相对定位，.comment-desc 将被 .comment-time 的宽度截断。

带有评论框的文本溢出

Text OverFlow with Comment Box

html

css

comments

overflow

编辑：