Question

我有以下列表：

<ul>
    <li style="white-space: nowrap;">
        <img src="" style="width:25px;" />
        <a href="" style="white-space:normal; display:inline-block;">a b c d ...</a>
    </li>
</ul>

在每个项目中，我都有一个图像和一个标签。遗憾的是，无法删除图像，并且无法更改将标签显示为内联块（li标签的样式也不能更改）。

问题：我在a标签中的文本很长，多行显示是必须的（白色空间：正常），但不知何故，a标签的宽度总是比容器div宽:(不幸的是我没有＆＃ 39;找到一种方法来删除水平滚动条。

额外宽度始终等于图像的宽度。如果删除图像，滚动条将消失。

是否可以在不删除图像的情况下执行此操作？ a标签应仅填充可用空间，但它填充空间，就像图像不在那里一样。

https://jsfiddle.net/8aqoj3u0/1/

Answer 1

要删除水平滚动条，请将df <- expand.grid(1:6, 1:6, 1:6) df[df$Var1 <= df$Var2 & df$Var2 <= df$Var3,] # # Var1 Var2 Var3 # 1 1 1 1 # 37 1 1 2 # 43 1 2 2 # 44 2 2 2 # 73 1 1 3 # 79 1 2 3 # 80 2 2 3 # 85 1 3 3 # 86 2 3 3 # 87 3 3 3 # 109 1 1 4 # 115 1 2 4 # 116 2 2 4 # 121 1 3 4 # 122 2 3 4 # 123 3 3 4 # 127 1 4 4 # 128 2 4 4 # 129 3 4 4 # 130 4 4 4 # 145 1 1 5 # 151 1 2 5 # 152 2 2 5 # 157 1 3 5 # 158 2 3 5 # 159 3 3 5 # 163 1 4 5 # 164 2 4 5 # 165 3 4 5 # 166 4 4 5 # 169 1 5 5 # 170 2 5 5 # 171 3 5 5 # 172 4 5 5 # 173 5 5 5 # 181 1 1 6 # 187 1 2 6 # 188 2 2 6 # 193 1 3 6 # 194 2 3 6 # 195 3 3 6 # 199 1 4 6 # 200 2 4 6 # 201 3 4 6 # 202 4 4 6 # 205 1 5 6 # 206 2 5 6 # 207 3 5 6 # 208 4 5 6 # 209 5 5 6 # 211 1 6 6 # 212 2 6 6 # 213 3 6 6 # 214 4 6 6 # 215 5 6 6 # 216 6 6 6属性设置为隐藏。

overflow-x

Answer 2

如果您想确保文字完全可见并环绕图片，请尝试使用calc。

Calc非常有用，因为它允许您混合测量。在这种情况下，链接宽度设置为100％减去 25像素（以适应您的图像）。

所以代码就是：

a {
  white-space:normal; 
  display:inline-block;
  max-width: calc(100% - 25px); /*Subtract 25px - the width of your image */
}

我在这里更新了您的plunker：https://jsfiddle.net/1v1oeLtw/

以下是浏览器对它的支持：http://caniuse.com/#feat=calc

内联块大小/水平滚动条

2 个答案: