当我设置-webkit-scrollbar属性时，Chrome和Safari之间的显示方式有所不同。Chrome不会将文本拆分为新行，但Safari会。我已经为文本设置了max-width属性，但是Safari不遵循max-width。这是密码。
<html>
<body>
<div class="chart-tooltip">
<div>
<table cellspacing="0" >
<tbody>
<tr>
<td align="right">
<div class="title-container">
<span class="icon"></span>
<span class="title">San Francisco</span>
</div>
</td>
<td>
<span class="value">0</span>
</td>
</tr>
<tr>
<td align="right">
<div class="title-container">
<span class="icon"></span>
<span class="title">San Francisco</span>
</div>
</td>
<td>
<span class="value">0</span>
</td>
</tr>
<tr>
<td align="right">
<div class="title-container">
<span class="icon"></span>
<span class="title">San Francisco</span>
</div>
</td>
<td>
<span class="value">0</span>
</td>
</tr>
<tr>
<td align="right">
<div class="title-container">
<span class="icon"></span>
<span class="title">San Francisco</span>
</div>
</td>
<td>
<span class="value">0</span>
</td>
</tr>
<tr>
<td align="right">
<div class="title-container">
<span class="icon"></span>
<span class="title">San Francisco</span>
</div>
</td>
<td>
<span class="value">0</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<style>
.chart-tooltip {
position: absolute;
padding: 12px;
max-height: 64px;
overflow-y: auto;
}
.chart-tooltip::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
}
.chart-tooltip::-webkit-scrollbar-thumb {
background-color: #d1d5e6;
border: solid 4px transparent;
border-radius: 12px;
}
.title-container {
line-height: 18px;
display: flex;
align-items: center;
justify-content: flex-start;
padding-top: 4px;
}
.icon {
height: 5px;
width: 11px;
display: inline-block;
margin-right: 8px;
background-color:#FF8F6C;
border:1px solid #FF8F6C;
}
.title {
max-width: 300px;
word-break: break-all;
white-space: pre-wrap;
}
.value {
display: inline-block;
padding-left: 16px;
}
</style>
</html>科德彭
https://codepen.io/DYS1230/pen/xxQwmEN
我希望Safari像Chrome一样运行，不要将文本拆分为新行。
1条答案
按热度按时间2hh7jdfx1#
：：-webkit-scrollbar仅在设置
overflow:scroll时才被支持。请参见下面的示例。
参考：https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
Codepen链接：https://codepen.io/salman-1775/pen/poQjGrz