When I set the -webkit-scrollbar property, there is a difference in display between Chrome and Safari. Chrome will not break the text into a new line, but Safari will. I have set the max-width property for the text, but Safari does not follow the max-width. Here is the code.
<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>
codepen
https://codepen.io/DYS1230/pen/xxQwmEN
I want Safari to behave like Chrome and not break the text into a new line.
::-webkit-scrollbar is only supported if overflow:scroll is set.
See the below example.
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
.chart-tooltip {
position: absolute;
padding: 12px;
max-height: 64px;
overflow-y: scroll;
}
.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;
} <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>Codepen link: https://codepen.io/salman-1775/pen/poQjGrz