CSS浮动将包含文本的div折叠到所需的最小值

2019年7月21日 227次阅读

示例图片：

和code at JSBIN.

情况是我正在尝试创建一个带有标签的复选框列表,每个标签旁边都有一个“信息图标”.

我们的想法是,如果你单击标签,它将触发复选框(应该如此),然后我们用JS启动一些操作.

信息图标是您点击以获取更多信息的工具提示.因为信息图标具有自己的交互,所以我们不能将其粘贴在标签内部,因为标签会触发复选框交互.

所以我要做的就是让信息图标尽可能接近标签文本.我通过将剩下的所有标签浮动来完成此操作,以便它们折叠到尽可能小的范围.然后我给标签一个最大宽度,以便不将信息图标向下推到下一行.

问题：请注意,如果标签未换行(第一个),则标签折叠为仅与文本(绿色边框)一样宽.但是,一旦标签必须包装(每隔一个例子),标签就会采用最大宽度尺寸.如果你带走了绿色边框,这看起来很有趣,因为信息图标现在似乎在视觉上漂浮在任意且看似随机的距离文本之外.

问题：有没有办法让浮动对象折叠到文本包装时的文本范围,或者这只是它在CSS中的工作方式？

编辑：

为了澄清,我希望上面的示例图像/代码最终生成如下所示的内容：

请注意,所有标签(绿色边框)都会折叠到与文本一样宽的范围 – 即使是文本包装的标签也是如此.

编辑2：

我想我理解这个问题……问题是文本只是包装,因为有一个最大宽度.换句话说,内容(文本)比最大宽度宽得多,因此如果未明确说明,则div不可能折叠到特定宽度.

因此,我认为没有解决方案. CSS只是没有设置来处理这个问题.

最佳答案 我真的很想看到纯CSS解决方案.我已经设法用脚本解决了这个问题.

试试这个Workinf Fiddle

HTML(此处不做更改)

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：取自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);
    });
});
点赞