Question

我正在开发一个聊天应用程序。在该聊天消息框中，我需要显示消息，用户名，当前日期和时间。我正在展示除了时间和日期以外的所有这些东西UI看起来不太好。

.userTextDivOp {
	text-align: left;
	float: left;
	clear: both;
	position: relative;
	background: white;
	padding-top: 5px;
	padding-bottom: 7px;
	padding-left: 7px;
	padding-right: 7px;
	border-radius: 6px;
	border: 3px solid #999;
	font-size: 12px;
	margin-bottom: 7px;
	margin-right: 4px;
	margin-left: 4px;
}

.userTextDivOp::before {
	content: '';
	position: absolute;
	visibility: visible;
	top: -3px;
	left: -11px;
	border: 9px solid transparent;
	border-top: 11px solid #999;
}

.userTextDivOp::after {
	content: '';
	position: absolute;
	visibility: visible;
	top: 0px;
	left: -6px;
	border: 9px solid transparent;
	border-top: 8px solid white;
	clear: both;
}

.userTextDivOp .message {
	word-break: break-all;
	font-size: 13px;
}

.userTextDivOp .username {
	position: relative;
	display: block;
	font-weight: bold;
	font-size: 14px;
	color: #8e0035;
  	text-align:left;
  	padding-bottom: 4px;
    margin-top: 3px;
}

.userTextDivOp .time {
	position: absolute;
  font-size: 14px;
   color: #f60;
}

<div class="userTextDivOp" >
  <span class="username">UserName</span>
  <span class="message">' Testing testing</span>
  <span class="time">04:00 PM 7 Jul 2016</span>
</div>

This is the sample.

Answer 1

＆＃13;

.userTextDivOp {
	text-align: left;
	float: left;
	clear: both;
	position: relative;
	background: white;
	padding-top: 5px;
	padding-bottom: 40px;
	padding-left: 7px;
	padding-right: 7px;
	border-radius: 6px;
	border: 3px solid #999;
	font-size: 12px;
	margin-bottom: 7px;
	margin-right: 4px;
	margin-left: 4px;
}

.userTextDivOp::before {
	content: '';
	position: absolute;
	visibility: visible;
	top: -3px;
	left: -11px;
	border: 9px solid transparent;
	border-top: 11px solid #999;
}

.userTextDivOp::after {
	content: '';
	position: absolute;
	visibility: visible;
	top: 0px;
	left: -6px;
	border: 9px solid transparent;
	border-top: 8px solid white;
	clear: both;
}

.userTextDivOp .message {
	word-break: break-all;
	font-size: 13px;
}

.userTextDivOp .username {
	position: relative;
	display: block;
	font-weight: bold;
	font-size: 14px;
	color: #8e0035;
  	text-align:left;
  	padding-bottom: 4px;
    margin-top: 3px;
}

.userTextDivOp .time {
	position: absolute;
  font-size: 14px;
   color: #f60;
}

＆＃13;

<div class="userTextDivOp" >
  <span class="username">UserName</span>
  <span class="message">' Testing testing</span>
  <span class="time">04:00 PM 7 Jul 2016</span>
</div>

＆＃13;

Answer 2

您可以使用时间类来定义要更改的范围。

.userTextDivOp {
	text-align: left;
	float: left;
	clear: both;
	position: relative;
	background: white;
	padding-top: 5px;
	padding-bottom: 7px;
	padding-left: 7px;
	padding-right: 7px;
	border-radius: 6px;
	border: 3px solid #999;
	font-size: 12px;
	margin-bottom: 7px;
	margin-right: 4px;
	margin-left: 4px;
}

.userTextDivOp::before {
	content: '';
	position: absolute;
	visibility: visible;
	top: -3px;
	left: -11px;
	border: 9px solid transparent;
	border-top: 11px solid #999;
}

.userTextDivOp::after {
	content: '';
	position: absolute;
	visibility: visible;
	top: 0px;
	left: -6px;
	border: 9px solid transparent;
	border-top: 8px solid white;
	clear: both;
}

.userTextDivOp .message {
	word-break: break-all;
	font-size: 13px;
}

.userTextDivOp .username {
	position: relative;
	display: block;
	font-weight: bold;
	font-size: 14px;
	color: #8e0035;
  	text-align:left;
  	padding-bottom: 4px;
    margin-top: 3px;
}

.userTextDivOp .time {
  //#You can edit these style settings to edit how the Time and date look
	position: relative;
   font-size: 14px;
   color: pink;
   padding: 0 20px;
   font-family: courier, monospace;
}

<div class="userTextDivOp" >
  <span class="username">UserName</span>
  <span class="message">' Testing testing</span>
  <span class="time">04:00 PM 7 Jul 2016</span>
</div>

Answer 3

暂且使用您可以将标记与datetime属性一起使用，Time只是一个HTML标记。这是一个代表2011年11月的简单示例：

   <time> 2011-11 </time>

而datetime属性是使time元素唯一的原因。它表示您以机器可读格式表示的任何文本的日期，时间或持续时间。这意味着它适用于计算机，而不是人类，因此它具有非常特定的格式。

人类可读的版本可能更常见的是日期时间的文本表示：

  <time datetime="2011-11">November, 2011</time>

  <time datetime="2013-04-01">April 1st, 2013</time>

  <time datetime="5d 22h 54m 41s">5 days, 22 hours, 54 minutes, and 41    seconds</time>

Answer 4

嗯，你可以做的一件事，比如facebook;当有人悬停聊天消息时，您可以使时间可见。

JS FIDDLE

<强> HTML：

<div class="wrapper">
  <div class="userTextDivOp" >
    <span class="username">UserName</span>
    <span class="message">' Testing testing</span>
    <span class="time">04:00 PM 7 Jul 2016</span>
  </div>
</div>

.wrapper{
  position: relative;
}

.userTextDivOp {
    text-align: left;
    float: left;
    clear: both;
    background: white;
    padding-top: 5px;
    padding-bottom: 7px;
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 6px;
    border: 3px solid #999;
    font-size: 12px;
    margin-top: -3px;
    margin-left: -2px;
    cursor:pointer;
}
.userTextDivOp .time {
    position: absolute;
  font-size: 14px;
  color: #f60;
  left: 125px;
  top: 0;
  visibility:hidden;
}
.userTextDivOp:hover .time {
  visibility:visible;
}

.userTextDivOp::before {
    content: '';
    position: absolute;
    visibility: visible;
    top: -3px;
    left: -11px;
    border: 9px solid transparent;
    border-top: 11px solid #999;
}

.userTextDivOp::after {
    content: '';
    position: absolute;
    visibility: visible;
    top: 0px;
    left: -6px;
    border: 9px solid transparent;
    border-top: 8px solid white;
    clear: both;
}

.userTextDivOp .message {
    word-break: break-all;
    font-size: 13px;
}

.userTextDivOp .username {
    position: relative;
    display: block;
    font-weight: bold;
    font-size: 14px;
    color: #8e0035;
    text-align:left;
    padding-bottom: 4px;
    margin-top: 3px;
}

如何在聊天消息框中正确显示日期和时间

4 个答案: