CSS float to collapse a div with wrapped text to the minimum needed

问题

Example image:

And the code at JSBIN.

The situation is that I'm trying to create a list of checkboxes with labels with an 'info icon' next to each one.

The idea is that if you click the label, it will trigger the checkbox (as it should) and then we fire off some actions with JS.

The info icon is a tool tip that you'd click on to get more info. Because the info icon has it's own interaction, we can't stick it inline inside of the label, as the label fires off the checkbox interaction.

So what I'm trying to do is get the info icon as close to the label text as I can. I've done this by floating all the labels left so that they collapse to as small as they need to be. I then give the labels a max-width so as to not push the info icon down to the next line.

The problem: Notice that if the label doesn't wrap (first one) the label collapses to only be as wide as the text (green border). However, once the label has to wrap (every other example) the label takes on the max-width size. This looks funny if you take away the green border as the info icons now seem to visually float an arbitrary and seemingly random distance away from the text.

The question: Is there a way to make a floated object collapse to only as wide as the text when the text wraps, or is this just how it works in CSS?

EDIT:

To clarify, I'd like the above sample image/code end up producing something that looks like this:

Notice that all of the labels (green borders) collapse to only be as wide as the text--even on the ones where the text wraps.

EDIT 2:

I think I understand the problem...the problem is that the text is wrapping only BECAUSE there is a max-width. In otherwords, the contents (the text) is much wider than the max-width so it's impossible for the div to collapse down to a specific width if it's not explicitly stated.

As such, I don't think there is a solution to this. CSS just isn't set up to handle this.

回答1:

I would really love to see a pure CSS solution. I've managed to solved this with a script.

try this Workinf Fiddle

HTML (no changes here)

CSS

ul, li
{
  list-style: none;
  margin: 0px;
  padding: 0px;
}

ul
{
  border: 1px solid red;
  width: 200px;
}

li
{
  margin: 10px 0;
}


li *
{
  vertical-align: top;
}

label
{
  border: 1px solid green;
  display: inline-block;
  max-width: 150px;
}

.infoIcon
{
  color: blue;
  display: inline-block;
}

JQuery: taken from this post

$.fn.textWidth = function () {
    var html_org = $(this).html();
    var html_calc = '<span>' + html_org + '</span>';
    $(this).html(html_calc);
    var width = $(this).find('span:first').width();
    $(this).html(html_org);
    return width;
};

$(document).ready(function () {
    $("label").each(function ()
    {
        $(this).width($(this).textWidth() + 2);
    });
});

回答2:

Change your following CSS property:--

label {
float: left;
margin-left: 20px;
max-width: 150px;
min-width: 150px;
border: 1px solid green;
}

See the JSBIN:- http://jsbin.com/ucamOW/9

Let me know Is it same which you want?

来源：https://stackoverflow.com/questions/18965694/css-float-to-collapse-a-div-with-wrapped-text-to-the-minimum-needed

标签

css

css-float