TestUser013,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#slider{
width: 200px;
}
.hot{
border: 1px dashed Gray; padding: 5px; font-size : 14px; display: inline-block; width: 90%; height: 40px;
}
.mini {
font-size : 11px;word-wrap: break-word;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
[].forEach.call( document.querySelectorAll('.hot'), function(el) {
if(el.scrollWidth > el.clientWidth) el.classList.add("mini")
});
});
</script>
</head>
<body>
<div id="slider">
<div class="hot">GHBVFRT</div>
<div class="hot">GHBVFRTGFDERTYUJHGNVFDSXCDE</div>
<div class="hot">GHBVFRT</div>
<div class="hot">GHBVFRTGFDERTYUJHGNVFDSXCDE</div>
<div class="hot">GHBVFRT</div>
<div class="hot">GHBVFRTGFDERTYUJHGNVFDSXCDE</div>
</div>
</body>
</html>