Question

我无法理解为什么我试图进入泡泡盒的文字不会出现在那里。

Here是我看到的图片的链接

我是超级新手，这可能是一个非常愚蠢的问题，但我花了40分钟试图找出错误。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

.bubble
{
    position: absolute;
    width: 230px;
    height: 33px;
    text-align: left;
    font-size: 10px;
    line-height: 100px;
    background-color: #00ff00;
    border-radius: 10px;
    margin-top: 100px;
    margin-left: 200px;
}
.bubble:after
{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 20px;
    top: 33px;
    border: 22px solid;
    border-color: #00ff00 transparent transparent #00ff00;
}

</style>

</head>
        <div class="bubble">im lemon im a little spaghetti</div>
</html>

帮助

Answer 1

您应该定义line-height: 33px，因为这是您泡泡的高度

请参阅fiddle

我建议您添加一些填充，以便文本不会卡在气泡的左边界。像那样：

padding: 0 5px;

这将在左侧和右侧添加5px填充，这是一个简写：

padding: 0 5px 0 5px;本身就是

的简写

padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;

请参阅updated fiddle

Answer 2

看起来像是重叠的。您应该看看这个示例，有各种布局和其他css选项来完成您尝试覆盖多个浏览器的内容。

http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

以下是第一个气泡文字的CSS：

.triangle-isosceles {
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  color:#000;
  background:#f3961c; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
  background:-moz-linear-gradient(#f9d835, #f3961c);
  background:-o-linear-gradient(#f9d835, #f3961c);
  background:linear-gradient(#f9d835, #f3961c);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

/* Variant : for top positioned triangle
------------------------------------------ */

.triangle-isosceles.top {
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
  background:-moz-linear-gradient(#f3961c, #f9d835);
  background:-o-linear-gradient(#f3961c, #f9d835);
  background:linear-gradient(#f3961c, #f9d835);
}

完整的CSS： http://nicolasgallagher.com/pure-css-speech-bubbles/demo/default.css

基本上你通过调用类将文本放在

段落标记内：

<p class="triangle-isosceles">This only needs one HTML element.</p>

@ref：http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

为什么文字会留在我的泡泡盒外？

2 个答案: