CSS: how to make a span only as wide as its content


Tags: css,append,html

Problem :

I am using the following code snippet to append a span to another one which work fine so far. The content of the parent span is onyl a name and there is no width defined for any of the spans.

My problem is that the span I append always get placed in a new line instead of directly behind the parent span. What do I have to do that it appears in the same line as the parent span, i.e. directly behind it ?

My function (working):

function myFunction()
{
    var parentID = someID;
    var statusID = 'status' + parentID;

    $('<span/>', {
    id: statusID
    }).addClass('active').appendTo('#'+parentID);
}

Example parent span:

<span class="user" id="someID"><strong>Last Name, First Name</strong></span>

Many thanks for any help with this, Tim



Solution :

By default, each and every element is as much wider as its content would take space so you donot need to write any code for that, just remove any code replacing the default width of the element.

What do you want to achieve?

The only issue that I am getting is, that your parent element is more wider than the space it should take. What I mean is that the parent is getting more space, so the child is going a line below the actual place. Something like giving the parent element a limited space as

.parent {
  max-width: someval;
}

.child {
  width: auto;
}

One more thing, how are you executing the function of yours?


    CSS Howto..

    how to minify css file containing @page

    How can I prevent this div in my table from increasing the cell height?

    How to load CSS into CodeIgniter

    How to detect single letters and modify their look/css

    How to center in div without text-align?

    How to trigger a modal view with Highcharts, when zoom is also enabled?

    How to Set Banner-Like Background Image With CSS

    How can I make my form autoscale correctly?

    How to properly pad an HTML link?

    How to slide a div from bottom using pure css or pure javascript

    Draggable elements in div show up behind drop zone when div is scrollable, need them to show in front

    How to disable .less (dotLess CSS) syntax analysis in ReSharper 6?

    How to resize CSS Box with increase in content

    How to ensure dynamic CSS is loaded first before AJAX content?

    how to switch between left and right css rules using Jquery?

    How to Fix: iOS drops CSS files when javascript changes DOM

    How should I organize the contents of my CSS file(s)?

    How to read this hover syntax in css?

    How can I change the entire background color of a page?

    How do I Align The Border Of Text To An Image? (HTML/CSS) | (Extra [Answered]): How do I Fullscreen with Inspect? |

    Angular 2 Materialize CSS Side-Nav Not Showing

    How to make multiple gradient work with CSS

    How to leave some top gap for H2 title tag with css

    How to detect CSS translate3d without the webkit context?

    How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?

    How to get dimensions for a background image when background-size is set to contain?

    How to grow the width of a div as the width screen decreases using Css?

    Twitter Bootstrap - how to add some more margin between tooltip popup and element

    How to give style to iframed page content using parent pages css?

    How to change the arrow color of ' select' in a form with CSS [duplicate]