HTML CSS Box Styling

Question

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.

Can you put this in a fiddle?

zzzzBov
– zzzzBov

2012-03-30 13:32:24 +00:00
Commented Mar 30, 2012 at 13:32 — zzzzBov
– zzzzBov, Commented Mar 30, 2012 at 13:32
Here it is in fiddle. jsfiddle.net/zBExV

user432584920684
– user432584920684

2012-03-30 13:39:36 +00:00
Commented Mar 30, 2012 at 13:39 — user432584920684
– user432584920684, Commented Mar 30, 2012 at 13:39

Simon West · Accepted Answer · 2012-03-30 13:39:33Z

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

answered Mar 30, 2012 at 13:39

Simon West

3,7881 gold badge28 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:30:23Z

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.

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Mar 30, 2012 at 13:35

chipcullen

7,0001 gold badge23 silver badges17 bronze badges

2 Comments

user432584920684 Over a year ago

I have taken your advice and it now looks like this. jsfiddle.net/zBExV/1 However, is there a way to change to a smaller width and any extra words should extend vertically?

chipcullen Over a year ago

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: jsfiddle.net/zBExV/2

Collectives™ on Stack Overflow

HTML CSS Box Styling

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related