CSS语音气泡响应和隐藏

css speech bubble responsive and hidden

本文关键字：隐藏 响应 气泡 语音 CSS      更新时间：2023-09-26

我正在阅读这篇关于如何制作一个简单的css语音气泡的文章。

如何使气泡根据其内部的文本调整其大小，并在没有文本时隐藏?

如果有必要，我可以使用js，但如果只从css中完成，那将是很酷的。

html: 

<p class="speech">SitePoint Rocks!</p>
css: 

p.speech
{
    position: relative;
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: #fff;
    border: 8px solid #666;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
}

注意:

我上面链接的文章中提供的CSS与我的需求不兼容。我不得不寻找另一个响应css语音气泡，我发现了这个神奇的工具:http://www.ilikepixels.co.uk/drop/bubbler/

当没有文本时隐藏气泡的"css only"方式:

p.speech:empty:before,
p.speech:empty:after{
 display:none;
}

使用jquery设置大小和隐藏

$(document).ready(function() {
  $(".description > em").hide();
  $('a.to_links').click(
    function() {
      $(this).next("em").show('800');
      $(this).hide();
    });
  $('a.out_links').click(
    function() {
      $(this).parent("em").hide();
      $(this).parent().parent().find('a.to_links').show('600');
    });
});
.description {
  background: none repeat scroll 0 0 whiteSmoke;
  border: 1px solid #DBE1E6;
  overflow: hidden;
  width: 60px;
  padding: 20px;
  position: relative;
  z-index: 10;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  text-shadow: 1px 1px 0px white;
  filter: dropshadow(color=#ffffff, offx=1, offy=1);
  border: 8px solid #666;
  -webkit-box-shadow: 2px 2px 2px #888;
  -moz-box-shadow: 2px 2px 2px #888;
  box-shadow: 2px 2px 2px #888;
}
.description:empty:before {
  display: none;
}
.description:empty:after {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="description">Speech bubble css
  <a class="to_links">read more</a>
  <em> and a little bit of jQuery – just to show more content or hide it.
         <a class="out_links">less</a>
       </em>
</div>

参考

相关文章：