html - 显示列表项 css 的问题

Question

我有一个包含这些元素的列表项:

• 第一项
• 另一个列表项
• 沙子、砾石、粘土、陶瓷和耐火矿物采矿和采石 Material

而且我希望他们看起来确实在一行中看到了上面这个问题，或者如果元素变得太大，可以像这样很好地打破它:

• 沙子、砾石、粘土、陶瓷和耐火矿物采矿和采石 Material 大牌，排列得很好

但是我的元素看起来像这样(屏幕截图):

如您所见，它看起来不太好。这是我的 html 结构:

<ul class="something">
  <li>
     <div style="width:auto; display:inline-block;">
       <span>This is where super long text goes text goes</span>
     </div>
  </li>
</ul>

ul 和 li 没有任何样式，只有从 bootstrap css 继承的样式。

我应该使用哪个 css 才能使屏幕截图中的列表看起来像这个问题中的第一个？

Answer 1

<ul class="something">
  <li>
       This is where super long text goes text goes
  </li>
</ul>