Html 类似Facebook的朋友选择复选框

我正在尝试编写一个选择，比如Facebook的“邀请朋友”选择。我喜欢它，因为它使用默认复选框，而不是模拟每个项目选择的背景

问题是，我不明白他们怎么能在需要时将文本（朋友的名字）分成两行（文本太大）

我有一个简单的例子来说明我想要实现的目标。以下是HTML：

<div class="modal">
  <div class="modal-body">
    <ul class="unstyled">
      <li class="store_selectable">
        <input class="checkbox" type="checkbox">
        <a href="#">
        <div class="store-text">
          <div class="iblock"><img alt="Missing" src="http://placehold.it/30x30"></div>
          <div class="text"><div>This is the store</div></div>
        </div>
      </a>
    </li>
  </ul>

为了便于测试和理解，我在这里创建了一个JSFIDLE：

现在，如果列表项的宽度足够小，我要做的是将文本分成两行，更改这一行：

width:161px。搞乱了facebook的“邀请朋友”模式窗口CSS，我可以看到他们这样做了，但我不能

谢谢你的帮助
 不太确定您试图实现的界面，但文本不包装的原因是css

     overflow:hidden;

删除后考虑将您的复选框放入
文本将使用class.fl创建自己的div元素
    .fl { display:block; }

并排排列

在这两个元素的正下方创建另一个类为.clear的空div元素

    .clear { display:block; clear:both; line-height:0; }

防止下一个元素继承浮点：left

    .clear { display:block; clear:both; line-height:0; }