HTML CSS框造型

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

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

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

任何帮助，非常感谢。

来源

2012-03-30 user432584920684

的关键风格decleration你可以把这个在[小提琴]（http://jsfiddle.net）？ – zzzzBov 2012-03-30 13:32:24

这里是小提琴。 http://jsfiddle.net/zBExV/ – user432584920684 2012-03-30 13:39:36

嗯，我认为首先，在标记方面，你想让boxytest成为一个类，而不是创建一个新的元素。并且不要使用'align = center'。维护是一件痛苦的事情。

我会做这样的事情：在CSS

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

的：

.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。

来源

2012-03-30 13:35:17 chipcullen

我已采纳了您的建议，现在看起来像这样。 http://jsfiddle.net/zBExV/1/ 但是，有没有办法改变为更小的宽度，任何额外的单词应该垂直延伸？ – user432584920684 2012-03-30 13:43:04

对不起 - 我误解了 - 我以为你想要文字，而不是包装。这就是空白宣言的目的所在。西蒙西是正确的 - 你需要添加显示：内联块，如果你想它居中，你需要一个父元素与文本对齐：中心应用。我更新了你的小提琴：http://jsfiddle.net/zBExV/2/ – chipcullen 2012-03-30 13:48:58

非常感谢你的帮助！ '非常感谢！ :) – user432584920684 2012-03-30 13:52:21

正如chipcullen说发明自己的元素可能不是最好的方式去做这件事。但是，为了回答你的问题，你缺失似乎是display:inline-block;

jsfiddle here

来源

2012-03-30 13:39:33

明白了！谢谢你的帮助！ – user432584920684 2012-03-30 13:53:46

HTML CSS框造型

回答

相关问题