1

文本窗口需要具有固定的宽度和长度，并且必须自动换行长文本。它不能有水平滚动条，但它需要垂直条。您只能显示文本，但不能在其中输入文本。使用什么 html/css？我认为SO的提问页面中的预览窗口符合要求！它只是一个div。这是怎么做的？

4

2 回答 2

1

您可以使用一个简单div的来显示聊天气泡。我个人会使用一些简单的东西，例如：

<div class="chat-bubble"></div>

所有的内容都会被包裹在里面div。然后我会chat-bubble在 CSS 中设置类的样式，让它看起来像我想要的那样。

这是在 CSS 中制作聊天气泡的非常简洁的演练，应该是您尝试做的一个很好的起点。

于 2012-11-18T14:44:14.500 回答
0

我意识到这个问题有点老了，但我认为这是一个有趣的案例。

使用divHTML 元素是可能的，但在语义方面不是最佳解决方案。请记住，这div是最通用的HTML 元素。除了应该以某种方式将其与其他内容分开之外，它没有说明您的标记内容。

更好的方法是混合使用更具描述性的 HTML 5 元素，并用看起来像聊天气泡的东西覆盖它们的默认样式。

考虑这个例子，改编自这篇文章

<ul class="chat">
  <li class="message">
    <figure class="sender">
      <img src="https://example.org/avatar.png" alt="" class="avatar" />
      <figcaption>Example sender name</figcaption>
    </figure>
    <blockquote>
      <p>Text message</p>
    </blockquote>
  <li>
  <!-- more chat messages ... -->
</ul>
于 2022-02-24T14:53:03.913 回答