HTML CSS 框样式答案

【问题标题】：HTML CSS Box StylingHTML CSS 框样式
【发布时间】：2012-04-14 04:45:06
【问题描述】：

我正在尝试做一些 CSS 来补充我的 HTML 代码。我正在有效地尝试制作一个根据文本量改变大小的小盒子。目前，这就是它在行动中的样子。

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

包括 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>

非常感谢任何帮助。

【问题讨论】：

你能把这个放在fiddle吗？
这里是小提琴。 jsfiddle.net/zBExV

标签： html css

【解决方案1】：

正如chipcullen 所说，发明自己的元素可能不是解决此问题的最佳方式。但是要回答您的问题，您缺少的关键样式声明似乎是display:inline-block;

jsfiddle here

【讨论】：

知道了！感谢您的帮助！

【解决方案2】：

嗯，我认为首先，在标记方面，你想让 boxytest 成为一个类，而不是创建一个新元素。并且不要使用'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.

【讨论】：

我听取了您的建议，现在看起来像这样。 jsfiddle.net/zBExV/1 但是，有没有办法改成更小的宽度，任何多余的字都应该垂直延伸？
对不起 - 我误解了 - 我以为你想发短信不换行。这就是空白声明的用途。 Simon West 是对的——你需要添加 display: inline-block，如果你想让它居中，你需要一个应用了 text-align: center 的父元素。我更新了你的小提琴：jsfiddle.net/zBExV/2
非常感谢您的帮助！非常感谢！ :)