Question

我正在尝试使用一些CSS来补充我的HTML代码。我正在有效地尝试制作一个根据文本数量改变大小的小盒子。目前，这就是它的实际效果。 enter image description here

基本上，我希望它能在文本周围形成一个小盒子。注意图像中的最后一个“框”，如果字符串太长，它会将其剪掉并继续下一行。

包括CSS代码和使用示例。

<style type="text/css">
  boxytest
  {
    padding: 10px;
    text-align: center;
    line-height: 400%%;
    background-color: #fff;
    border: 5px 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;
  }
</style>

<body>
  <div align="center">
   <boxytest> Hey guys! What's up? </boxytest>
  </div>
</body>

非常感谢任何帮助。

Answer 1

正如chipcullen所说，发明自己的元素可能不是解决这个问题的最好方法。但是要回答你的问题，你遗失的关键风格似乎是display:inline-block;

jsfiddle here

Answer 2

好吧，我认为首先，就标记而言，你想要使用一个类，而不是创建一个新元素。并且不要使用'align = center'。维持是一种痛苦。

我会做这样的事情：

<body>
  <p class="boxy">Test sentence</p>
<body>

CSS中的内容：

 .boxy {
  padding: 10px;
  text-align: center;
  line-height: 400%%;
  background-color: #fff;
  border: 5px 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;
  /* to prevent word wrapping */
  white-space: nowrap;
  overflow: hidden;
  }

The last bit is based on this post

HTML CSS Box样式

2 个答案: