即使有空格，CSS也不會將文本左對齊-有解無憂

您好，我嘗試將容器中的一些文本向左對齊，但即使有可用空間，它也不起作用。如您所見，影像旁邊有一些空閑空間，無緣無故沒有使用。在這里，我給你看一張照片和風格。如果有人可以提供幫助，請提前致謝。

即使有空格，CSS 也不會將文本左對齊

.text-wrapper-overview {
  position: inherit;
  left: 100px;
  width: 65%;
}

.user-name {
  position: inherit;
  margin: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: large;
  font-weight: bold;
}

.last-message {
  position: inherit;
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 5px;
  font-size: small;
}

.timestamp-overview {
  position: inherit;
  margin: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: small;
  font-weight: normal;
}

<div id={this.name} className="chat-overview" onClick={()=>this.renderChat()}>
  <img className="round-image" src="https://i.pravatar.cc/200"></img>
  <div className="text-wrapper-overview">
    <p className="user-name">{this.name}</p>
    <p className="last-message">{this.lastMessage.text}</p>
    <p className="timestamp-overview">{this.lastDate}</p>
  </div>
  <div className="notification">10 </div>
</div>

uj5u.com熱心網友回復：

嘗試

p.date {
text-align: right;
}

屬性這將使 p 文本向右對齊。

在這里閱讀更多： https ://www.w3schools.com/cssref/pr_text_text-align.ASP

uj5u.com熱心網友回復：

.chat-overview 是否具有 flex 屬性？

uj5u.com熱心網友回復：

您尚未包含所有樣式以用作示例。但我建議查看flex 屬性。

.chat-overview {
  display: flex;
  border: 1px solid;
  border-radius: 5px;
  align-items: center;
}

.text-wrapper-overview {
  position: inherit;
  left: 100px;
  width: 65%;
}

.user-name {
  position: inherit;
  margin: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: large;
  font-weight: bold;
}

.last-message {
  position: inherit;
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 5px;
  font-size: small;
}

.timestamp-overview {
  position: inherit;
  margin: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: small;
  font-weight: normal;
}

<div id={this.name} class="chat-overview">
  <img class="round-image" src="https://i.pravatar.cc/200"></img>
  <div class="text-wrapper-overview">
    <p class="user-name">{this.name}</p>
    <p class="last-message">{this.lastMessage.text}</p>
    <p class="timestamp-overview">{this.lastDate}</p>
  </div>
  <div class="notification">10 </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/485748.html

標籤：javascript html css

上一篇：如何從本地存盤更新Select組件？

下一篇：如何創建打字文字效果