CSS浮动可将带有包装文本的div折叠到所需的最低限度 [英] CSS float to collapse a div with wrapped text to the minimum needed

问题描述

示例图片：

和

HTML （此处无更改）

CSS

  ul，li 
 {
列表样式：无； 
保证金：0px； 
 padding：0px; 
} 
 
 ul 
 {
边框：1px纯红色； 
宽度：200像素； 
} 
 
 li 
 {
保证金：10px 0; 
} 
 
 
 li * 
 {
 vertical-align：top; 
} 
 
标签
 {
边框：1像素的纯绿色； 
显示：inline-block; 
最大宽度：150像素； 
} 
 
 .infoIcon 
 {
 color：blue; 
显示：inline-block; 
} 
  

JQuery：：取自这篇文章

  $。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）; 
返回宽度； 
}; 
 
 $（document）.ready（function（）{
 $（ label）。each（function（）
 {
 $（this）.width （$（this）.textWidth（）+ 2）; 
}）; 
}）; 
  

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.

解决方案

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);
    });
});

这篇关于CSS浮动可将带有包装文本的div折叠到所需的最低限度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！