Internal CSS Example

原始CSS：既有左(對方送來的信息)、又有右(我方送出的信息)。使得文字具有聊天氣泡外框，且氣泡外框的大小會隨著文字多寡進行調整，文字越多、氣泡越大。可將瀏覽器寬度進行拉扯來觀看多文字之寬度最多填滿整體瀏覽器80%的寬度。要在div搭配p的狀態下產生換行效果，則必須於CSS中同時指定class以及p標籤，也就是:.sent p以及.recieved p 倘若將\|/20251127B此列從.sent p之p砍掉、改成.sent，則無法產生換行效果倘若將\|/20251127H此列從.recieved p之p砍掉、改成.recieved，則無法產生換行效果

你好

乖寶倫

A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7

----------------------------------------------------------------------------------------------------

凹

乖寶倫凹

A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7 A B C D E F G 1 2 3 4 5 6 7

---------------------------------------------------------------------------------------------------- ■瑋倫採用黃金標準法則 9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■9■ **** 使用瑋倫自改CSS **** 各別獨立聊天氣泡視窗間使用br來進行換行。倘若未來要使用javascript來打印出各別獨立聊天氣泡視窗間之換行效果，則需嵌入BR標籤，譬如： .append('First message.', document.createElement('br'), 'Second message.'); **** 額外嵌入id="ChatBubbleAlignRight"標籤使得總整體聊天氣泡視窗靠右對其

auocaday67890=黃金標準

0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ

willy is a boy willy is a boy willy is a boy willy is a boy willy is a boy willy is a boy willy is a boy willy is a boy willy is a boy willy is a boy willy is a boy willy is a boy 0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ

■瑋倫採用黃金標準法則 6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■6■ ---------------------------------------------------------------------------------------------------- 瑋倫自改CSS: 刻意只使用p標籤於\|/20251127E、\|/20251127F，當中並未使用br標籤，因此無法換行若要在不使用br的情況下，使用p來換行，則必須要將\|/20251127i處#ChatBubbleContainerWilly改成#ChatBubbleContainerWilly p才能換行

01234

WXYZ