如何正確顯示聊天消息框中的日期和時間

我正在開發聊天應用程序。在該聊天消息框中，我需要顯示一條消息，用戶名，當前日期和時間。我顯示除時間和日期以外的所有內容用戶界面看起來不太好。如何正確顯示聊天消息框中的日期和時間

.userTextDivOp { 
 
\t text-align: left; 
 
\t float: left; 
 
\t clear: both; 
 
\t position: relative; 
 
\t background: white; 
 
\t padding-top: 5px; 
 
\t padding-bottom: 7px; 
 
\t padding-left: 7px; 
 
\t padding-right: 7px; 
 
\t border-radius: 6px; 
 
\t border: 3px solid #999; 
 
\t font-size: 12px; 
 
\t margin-bottom: 7px; 
 
\t margin-right: 4px; 
 
\t margin-left: 4px; 
 
} 
 

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

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

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

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

 
.userTextDivOp .time { 
 
\t 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.

來源

2016-07-07 VK Chikkadamalla

那麼，爲什麼你標記在JavaScript這個問題.....其對CSS –

刪除'位置：中absolute''.time'並添加'display：block'。見[**這**]（https://jsfiddle.net/cq2ja1uz/1/） – Mohammad

我想你可以使用淺灰色的時間和日期。它不應該突出。例如'＃eee'和稍小的'font-size' – Abbr

可以使用的時間類來定義你想改變的跨度。

.userTextDivOp { 
 
\t text-align: left; 
 
\t float: left; 
 
\t clear: both; 
 
\t position: relative; 
 
\t background: white; 
 
\t padding-top: 5px; 
 
\t padding-bottom: 7px; 
 
\t padding-left: 7px; 
 
\t padding-right: 7px; 
 
\t border-radius: 6px; 
 
\t border: 3px solid #999; 
 
\t font-size: 12px; 
 
\t margin-bottom: 7px; 
 
\t margin-right: 4px; 
 
\t margin-left: 4px; 
 
} 
 

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

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

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

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

 
.userTextDivOp .time { 
 
    //#You can edit these style settings to edit how the Time and date look 
 
\t 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>

來源

2016-07-07 12:04:33 Grimley

.userTextDivOp { 
 
\t text-align: left; 
 
\t float: left; 
 
\t clear: both; 
 
\t position: relative; 
 
\t background: white; 
 
\t padding-top: 5px; 
 
\t padding-bottom: 40px; 
 
\t padding-left: 7px; 
 
\t padding-right: 7px; 
 
\t border-radius: 6px; 
 
\t border: 3px solid #999; 
 
\t font-size: 12px; 
 
\t margin-bottom: 7px; 
 
\t margin-right: 4px; 
 
\t margin-left: 4px; 
 
} 
 

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

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

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

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

 
.userTextDivOp .time { 
 
\t 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>

來源

2016-07-07 12:05:37

使用您可以使用datetime屬性標籤的Isnpite，時間僅僅是一個HTML標籤。下面是一個簡單的例子，代表2011年11月：

<time> 2011-11 </time>

而datetime屬性是什麼使時間元素唯一。它表示以機器可讀格式表示的任何文本的日期，時間或持續時間。這意味着它是用於計算機，而不是人類，因此它具有非常特定的格式。

這可能是一個有點更常見的爲人類可讀的版本，只是日期時間的文本表示：

<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>

來源

2016-07-07 12:08:32

嗯，有一兩件事你可以做，如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; 
}

來源

2016-07-07 12:13:08

我只想在消息框中顯示時間和日期。 –

如何正確顯示聊天消息框中的日期和時間

回答

相關問題