Я использую веб-сайт под названием streamlabs.com, который представляет собой универсальный инструмент для прямых трансляций на Twitch, YouTube и Mixer. Я сделал наложение Photoshop с тремя значками платформы для потоковой передачи в реальном времени, и они расположены на одинаковом расстоянии друг от друга при разрешении 2K (2560x1440 пикселей). Затем я использую это с программным обеспечением Open Broadcast Software, также известным как OBS, для потоковой передачи этих платформ. Streamlabs позволяет встраивать веб-страницу прямо в программное обеспечение и отображать ее. Я установил размер веб-страницы 2560 x 1440 пикселей, как указано выше; того же размера, что и моя установка OBS, и это позволит мне идеально выровнять все пиксель за пикселем.
По сути, я хочу разместить количество просмотров рядом с каждым из элементов.
Иерархия выглядит вот так в сжатой форме: -
Parent container
Child container
Icon
View count text
platform_container
twitch_container
fab fa-twitch platform-icon
twitch-count
Вот фактический код, взятый из моего Firefox Developer Tool 
До сих пор я уже работал чтобы удалить значки с помощью
#platform_container #twitch_container .fab.fa-twitch.platform-icon {
display: none !important;
}
Затем я использовал относительное положение, чтобы переместить каждый дочерний контейнер от родительского div platform_container, размер которого увеличился до 2560 x 1440, например
#platform_container #twitch_container {
position: relative;
left: 680px !important;
}
Под каждым из дочерних контейнеров находится значок и фактический текст количества просмотров, и это класс twitch_count, который я пытаюсь уменьшить, чтобы исправить в его родительском контейнере twitch_container. Я думал установить параметр max-width в twitch_container, а затем масштабировать шрифт, определенный в дочернем контейнере twitch_count. Когда количество просмотров увеличивается, количество символов будет увеличиваться с увеличением ширины, и я не хочу перекрывать другой div, а вместо этого уменьшаю масштаб до максимальной ширины, установленной в родительских div над ним.
Вот как это выглядит на скриншоте ниже. Зазор между всеми красными стрелками должен быть равным, но, как вы можете видеть, чем больше символов добавляется в контейнер Twitch в этом примере, тем больше увеличивается. Я хочу, чтобы текст уменьшился в размерах до определенной степени, не влияя на ширину.
У меня есть кое-какие знания о CSS, и я установил, попытался установить max-width на twitch_container и контейнер подсчета подергиваний, а затем установил размер шрифта до 60vmin и 60%, а счетчик движений полностью игнорирует его родительский div, и размер просто исчезает с экрана, потому что он слишком большой.
Есть идеи?
ОБНОВЛЕНИЕ 1
<html>
<head>
<title>Viewer Count Widget</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<script type="text/javascript" src="https://ff.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=QxoJqggwpIFoYwuEU6jAPg8vfi5xoaqgIlShnnH8Mh6ZzTBWezbNYVjEqi9iFbI6ZSl4Lrvm2QVmeWLI20SxNavAi9N9YykjkJe0utSTYRlUVQV_MQ1ZwrgwxGiANY4J" charset="UTF-8"></script><script src="https://cdn.polyfill.io/v2/polyfill.min.js?unknown=polyfill&features=es6|gated|always"></script>
<script src="/mixed/assets/vendor/js/manifest.js?id=01c8731923a46c30aaed"></script>
<script src="/mixed/assets/vendor/js/vendor.js?id=9e7e3700e75d5ed3493a"></script>
<script src="/mixed/assets/external/js/external.js?id=6aae1514e74721024ba5"></script>
<style id="theme"></style>
<script>
//function stubs for xsplit beta
window.SetVolume = function() {};
window.OnSceneLoad = function() {};
window.setBackGroundColor = function() {};
window.GetPlayState = function() {};
window.UpdateLocalProperty = function() {};
window.SetEvent = function() {};
</script>
</head>
<body style="margin:0px">
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">
<iframe
sandbox="allow-scripts"
frameborder="0"
style="width:100%;height:100%;"
seamless="true"
src="/widgets/frame/viewercount/custom"
id="sl_frame"></iframe>
<div id="custom_html">
<!-- all platforms will be added to this container -->
<div id="platform_container">
</div>
<!-- platform item -->
<script type="text/template" id="platform_item">
<span style="font: {font_weight} {font_size} '{font}'; margin:20px" id="{platform}_container">
<i class="fab fa-{platform} platform-icon" style="color:{platform_color};"></i>
<img class="platform-img" width="{font_size}" height="{font_size}">
<span style="color:{font_color}" class="{platform}-count"></span>
</span>
</script>
</div>
<style id="custom_css">
</style>
<style>
#sl_frame {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
</style>
<input type="hidden" id="simulate" value="" />
<script src="/mixed/assets/widgets/js/viewercount.js?id=baf2989d9a92071b21d6"></script>
<input type="hidden" id="token" value="BDFF52B12D5C0F0452E5" />
<input type="hidden" id="profile" value="" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.3/webfont.js"></script>
<!-- include Google analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-52139786-2', 'auto');
ga('send', 'pageview');
</script>
<!-- sentry -->
</body>
</html>
ОБНОВЛЕНИЕ 2
Я все еще не могу заставить его работать. Это строки кода на трех вкладках панели управления Streamlabs; HTML, CSS и JS. К сожалению, я не могу поделиться URL-адресом, поскольку он содержит конфиденциальную информацию.
HTML
<!-- all platforms will be added to this container -->
<div id="platform_container">
</div>
<!-- platform item -->
<script type="text/template" id="platform_item">
<span style="font: {font_weight} {font_size} {font}" id="{platform}_container">
<i class="fa fa-{platform} platform-icon" style="color:{platform_color};"></i>
<img class="platform-img" width="{font_size}" height="{font_size}">
<span style="color:{font_color}" class="{platform}-count"></span>
</span>
</script>
CSS
#platform_container {
display: flex;
border: 2px solid orange;
}
/* Twitch */
#platform_container #twitch_container {
border: 3px dashed blue;
max-width: 100px;
text-align: center;
margin-right: 20px;
}
#platform_container #twitch_container .twitch-count {
margin: 0;
line-height: 1;
max-width: 100px;
border: solid blue 2px;
font-size: 50px;
}
#platform_container #twitch_container .platform-icon {
display: none;
}
#platform_container #twitch_container .twitch-count::after {
content: "123456";
}
JS
// Please use event listeners to run functions.
document.addEventListener('onLoad', function(obj) {
// obj will be empty for viewer count widget
// this will fire only once when the widget loads
});
document.addEventListener('onEventReceived', function(obj) {
// obj will contain information about the event
});
const textElems = document.querySelectorAll("#platform_container > span[id$="_container"] > span[class$="-count"]");
const containerElem = document.querySelector("#twitch_container");
const fs = window.getComputedStyle(textElems[0]).fontSize;
const mw = window.getComputedStyle(containerElem).maxWidth;
const maxFontSize = parseFloat(fs);
const maxWidth = parseFloat(mw);
for (i = 0; i < textElems.length; i++) {
const elem = textElems[i];
if (elem.scrollWidth > maxWidth) {
elem.style.fontSize = (maxFontSize / elem.scrollWidth) * maxWidth + "px";
}
}
Снимок экрана, показывающий влияние текущего кода 