0

I am trying to do some CSS to complement my HTML code. I am effectively trying to make a little box which changes size based on the amount of text there is. Currently, this is what it looks like in action. enter image description here

Essentially, I'd like it to form a little box around the text. Notice the last 'box' in the image, if the string is too long, it cuts it off and continues on the next line.

Included is the CSS code and an example of usage.

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

Any help is greatly appreciated.

user432584920684
  • 379
  • 1
  • 8
  • 19

2 Answers2

2

As chipcullen says inventing your own element is probably not the best way to go about this. But to answer your question the key style decleration your missing appears to be display:inline-block;

jsfiddle here

Simon West
  • 3,708
  • 1
  • 26
  • 28
1

Well, I think first off, in terms of markup, you want to make boxytest a class, and not create a new element. And don't use 'align=center'. It's a pain to maintain.

I would do something like this:

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

The in 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.

Community
  • 1
  • 1
chipcullen
  • 6,840
  • 1
  • 21
  • 17
  • I have taken your advice and it now looks like this. http://jsfiddle.net/zBExV/1/ However, is there a way to change to a smaller width and any extra words should extend vertically? – user432584920684 Mar 30 '12 at 13:43
  • I'm sorry - I misunderstood - I thought you wanted to text to not wrap at all. That's what the white space declaration is for. Simon West is right - you need to add display: inline-block, and if you want it to be centered, you need a parent element with text-align: center applied. I updated your fiddle: http://jsfiddle.net/zBExV/2/ – chipcullen Mar 30 '12 at 13:48