CSS: Make the box width fit the text content

I'm looking to make the width of the box adjust to the text inside it

Here is the HTML code snippet:

<span class="box">Testing content of the box</span>

And here is the CSS code snippet:

.box {
    padding-left:5px;
    padding-right:5px;
    color: #fff;
    background-color: #ff9c00;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: inline-block;
}

Should it look like this?

https://i.sstatic.net/0cJEq.png

Or perhaps more like this?

https://i.sstatic.net/HcfKX.png

The goal is to maintain equal padding on both left and right sides regardless of the text size.

Any suggestions on how I can achieve this?

css

Answer №1

.container {
  padding:10px;
  color: #fff;
  background-color: #ff9c00;
  float: left;
  clear: both;
  margin-bottom:10px;
  border-radius:3px;
  max-width:400px;
  text-align:justify;
}
<div class="container">Content</div>

<div class="container">Content, and even more content and even more content and even more content and even more content and even more content </div>

Hope this snippet is useful for your project!

Answer №2

Combine the use of float: left and clear: both

.box {
  padding-left: 5px;
  padding-right: 5px;
  color: #fff;
  background-color: #ff9c00;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  float: left;
  clear: both;
  margin-bottom: 1em;
}
<span class="box">Content</span>

<span class="box">Content, and even more content</span>

Answer №3

Setting the property <strong>width</strong> to <strong>auto</strong> should resolve the issue.

.box {
    padding-left:5px;
    padding-right:5px;
    color: #fff;
    background-color: #ff9c00;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    width: auto;
    display: inline-block;
    margin-bottom: 5px;
}
<span class="box">Content inside the box</span>

<span class="box">More content inside the box More content inside the box More content inside the box </span>

Answer №4

Utilize the properties min-width and max-width to define the minimum and maximum dimensions of sections.

.box {
  padding:10px;
  color: #fff;
  background-color: #ff9c00;
  float: left;
  clear: both;
  margin-bottom:10px;
  border-radius:3px;
  max-width:400px;
}
<span class="box">Content</span>

<span class="box">Content, along with additional content that exceeds the boundaries of the container.</span>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Aligning two floating elements vertically in respect to each other

Although the topic of vertically centering elements is common on various websites, I am new to HTML and still find it confusing even after doing some research. I attempted to create a basic header element for a website that includes an h1 title and a navi ...

htmlcssvertical-alignment

Break down the text of a paragraph into separate words, placing each word within its own span element, and then add animations

I am facing an issue with my paragraph element that has the display property set to hidden. I have split each word of the paragraph and placed them inside individual span elements. My goal is to create an effect where each word comes from different locatio ...

javascripthtmlcss

Avoid the simplified view prompt when using Chrome or utilize the simplified view feature without any interruptions

When I access my website from Chrome on Android, I am prompted to "Show Simplified View" at the bottom of the screen. Clicking this prompt results in only one news item being displayed instead of the intended 25, controls removed, and scrolling disabled. O ...

htmlcsstwitter-bootstrapgoogle-chromebootstrap-4

Ways to disable the caching feature in Google Chrome

When I am working on CSS and JS around a page, I need to disable the cache mechanism in Google Chrome browser. A trick is to open Chrome DevTools, which automatically disables the cache mechanism (you can configure this in the settings section). Are ther ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

What is the best way to eliminate the default background color applied to the body automatically?

I'm currently developing a Covid-19 tracking web application and I am using chartJS to showcase data from an API. In my CSS, I have assigned a background color to all elements with an asterisk (*), but for some reason there are empty spaces around the ...

javascriptcsschart.js

The pseudo class before is experiencing issues with background color in Safari and not functioning as

Issue with Pseudo class before not displaying background colour in Safari browser To view the code, please visit the following link here HTML <div id='test'> <p>Test </p> </div> CSS #test { position: relative; per ...

csssafaricross-browserpseudo-class

Background image not displaying

My web page has a background image set using this CSS: body, html { background-image: url(Content/Images/bg-lounge-2-l.jpg); background-repeat: repeat; background-attachment: fixed; /*background-position: 0 -390px;*/ } ...

css

The circular loader in reactstrap Spinner is not displaying as expected

I am attempting to display a loader using the reactstrap (v^7.1.0) Spinner component, but nothing is appearing on the screen. When I inspect the page in Chrome, it seems that the CSS for Spinner is not present. https://i.sstatic.net/uVsRn.png Does anyone ...

cssreactjsreactstrap

Embedding an iframe with vertical scrolling enabled

Could you explain why I am unable to scroll the full width of the website? Here is a link: http://codepen.io/anon/pen/EKPaao?editors=1100. Also, what do you think about using this solution for adjusting iframes on different screen sizes? My iframe seems to ...

htmlcssiframe

Is it possible to apply a CSS transform without erasing the existing transform?

Looking for a solution: elem transform translateY(5px) scale(1.2) I want the element to move down an extra 5px on hover elem:hover transform translateY(5px) Is there a way to achieve this without knowing the previous state of the transform? Appr ...

csstransform

When arriving on a page via an HTML anchor tag, the CSS style does not appear. How can I "reinstate" it?

I have set up a website with an index.html page that links to a contact.html page using anchor tags. On the contact.html page, there are anchor tags that should navigate the user back to specific sections of the index.html page. The navigation works fine, ...

javascripthtmlcssanchor

I require fixed headers that no longer stick once reaching a specific point

I have a setup where the names and occupations of participants are displayed next to their artworks, and I've made it sticky so that as we scroll through the images, the names stay on the left. Now, I want the names to scroll out once the images for e ...

javascripthtmlcss

Tips for establishing a fixed point at which divs cease to shrink as the browser size decreases

There are numerous dynamically designed websites where divs or images shrink as the browser size decreases. A great example of this is http://en.wikipedia.org/wiki/Main_Page The div containing the text shrinks proportionally to the browser size until it ...

javascriptjqueryhtmlcssresize

Tips for aligning text to the right and button to the left while ensuring responsive design with CSS

Trying to align text on the left and the button on the right with space between them in a responsive card design. The button has a background image added to it. Here is my attempted CSS, but the design is not yet fully responsive: .component { disp ...

htmlcss

Troubleshooting Cascading Style Sheet problem on Samsung Galaxy S5

In developing a Cordova Android application, I designed a CSS specifically for screen resolutions of 1080 x 1920. This CSS is accessed using media queries. @media screen and (max-width: 680px) and (orientation:portrait) //Compatible with Galaxy S5 or @m ...

htmlcsscordovaphonegap-pluginsandroid

Unable to locate the element within the specified div using xpath or css selector

I have attempted to retrieve the output "January 27" using this code: task_offer_deadline = driver.find_element_by_xpath('//*[@id="table"]/div[2]/div/a/div[1]/span[2]/div/em').text The xpath was obtained from Google Chrome Console. Here is a sn ...

pythoncssseleniumxpathelement

Mobile Bootstrap 4 experiencing logo display issue

My .navbar logo disappears when the screen width is under 768px. I've seen a similar post about this issue, but they had set a very high height. I haven't specified a height for my navbar or navbar brand. Any help would be greatly appreciated, th ...

cssbootstrap-4

Tips for positioning an element at the bottom of columns using bootstrap

I'm having trouble aligning an image to the bottom of the page. Despite the column being the same height, the image just won't align all the way to the bottom. https://i.sstatic.net/0u9LH.jpg Check out the Codepen demo for reference: https://co ...

htmlcssbootstrap-4

Is there a Safari glitch related to floating elements?

I stumbled upon a strange issue with the layout I've been working on, and it led me to this concise code snippet that seems to be causing misrendering in desktop Safari. It appears that the div#shim element is what's triggering the text misrender ...

htmlcsssafaricss-float

Bug in Chrome 89 causing flex elements to overlap

Recently, I encountered an issue with my list items overlapping in the latest version of Chrome 89 To display the list, I am using flex-direction: column-reverse;. Does anyone have any suggestions on how to fix this problem? Chrome 89 https://i.sstatic. ...

cssreactjsgoogle-chromeflexbox