---
# System prepended metadata

title: 訊息框呈現法

---

<style>
.chat-container {
  display: flex; /* 這邊都不要動，往下拉 */
  flex-direction: column;
  gap: 20px;
  width: 100%;
  font-family: Arial, sans-serif;
  font-weight: 400;
  max-width: 100%;
}
.chat-message {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}
.sender-name {
  font-size: 12px; /* 理論上是改人名的相關設定，但未經測試 */
  font-weight: bold;
  margin-bottom: 3px;
  color: #666;
}
.chat-left, .chat-right {
  display: inline-block;
  padding: 10px;
  border-radius: 10px;
  word-wrap: break-word;
  white-space: pre-wrap;
  min-width: 40px;
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
}
.chat-left {
  background-color: #f1f1f1; /* 右邊對話框背景色 */
  color: #3C3C3C; /* 右邊對話框字體色 */
  align-self: flex-start;
  max-width: 70%; /* 對話框寬度佔畫面百分比 */
}
.chat-right {
  background-color: #FFC1E0; /* 右邊對話框背景色 */
  color: #3C3C3C; /* 右邊對話框字體色 */
  align-self: flex-end;
  max-width: 70%;
}
  
</style>

<div class="chat-container">
<div class="chat-message" style="align-self: flex-start;">
  <div class="sender-name">伊森‧克羅斯</div>
    <div class="chat-left"><strong>粗體字</strong></div>
</div>
    
 <div class="chat-container">
<div class="chat-message" style="align-self: flex-start;">
  <div class="sender-name">伊森‧克羅斯</div>
    <div class="chat-left"><em>斜體字</em></div>
</div>

 <div class="chat-container">
<div class="chat-message" style="align-self: flex-start;">
  <div class="sender-name">伊森‧克羅斯</div>
    <div class="chat-left">粗體和斜體，使用對話編輯器可以讀原文**粗體*斜體的設定（匯出時會字動轉為上述語法）</div>
</div>
     
<div class="chat-message" style="align-self: flex-end;">
  <div class="chat-right">可以用enter隔行。
　　會吃自動格式。
想怎麼打就怎麼打
但是自然語言和< b r>空格的排版方式不能混用</div>
</div>
<br>
可以看官方的教學文件，有標題、**粗體**、*斜體*、==熒光筆==之類的各種用法
<span style="color: red;">文字換色比較麻煩要把要換色的文字框起來</span>
<br>
    
[對話編輯器](https://luciferseyebl.github.io/dialogue-editor/)

      
---


### 官方沒教的文字置中
<center>AI文字戀愛APP〔卿卿我我〕劇情紀錄</center>
<center>本APP由AI演繹男方，user演繹對方（此為凜）即興自由互動</center>
<center>以你一句我一句的對話方式推進</center>