向语音气泡实时添加文本

Adding text to a speech bubbles in real time

本文关键字：添加 文本 实时 气泡 语音      更新时间：2023-09-26

我有一个图像将构成html页面的背景，我想在上面叠加语音气泡。我已经弄清楚了如何使用css制作气泡，并设置它们的位置。但是我不知道我将如何填充气泡（div 元素）。短信将填充文件，我需要抓取字符串并将它们显示在气泡中，在消息进入时刷新气泡内容。有什么想法吗？

假设您的一个气泡包含一个如下所示的 DIV：

<div id="bubble1">This is the text</div>

您可以使用Javascript轻松更改文本内容。建议使用像jQuery这样的JS库。下面是一个更改文本的代码示例：

<script>
$(document).ready(function()
{
  $('#bubble1').text('This is the changed text'); // to change the text
  $('#bubble1').html('This has <b>some</b> formatting'); // to change the html
});
</script>

不要忘记用这样的一行包含jQuery本身：

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

我不明白你从哪里得到你的字符串，如果你让我知道，我可以更新答案。

如果你不熟悉jQuery，看看这里。

我认为

这将回答您的问题：http://nicolasgallagher.com/pure-css-speech-bubbles/请记住，这是 css3，因此较旧的浏览器可能会遇到问题。

相关文章：