Home/ Questions/Q 7717293
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T02:51:12+00:00

I am trying to do some CSS to complement my HTML code. I am

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0