There is a footer site

.heart { color: red; margin: 0 12px; } .footer1 { background-color: lime; padding: 10px; margin: 4px; } .footer2 { width: 400px; background-color: pink; padding: 10px; margin: 4px; } .txt { white-space: nowrap; } 
 <footer class="footer1"> <span class="txt">Some text 1</span> <span class="heart">❤</span> <span class="txt">Some text 2</span> <span class="heart">❤</span> <span class="txt">Some text 3</span> <span class="heart">❤</span> <span class="txt">Some text 4</span> <span class="heart">❤</span> <span class="txt">Some text 5</span> <span class="heart">❤</span> <span class="txt">Some text 6</span> </footer> <footer class="footer2"> <span class="txt">Some text 1</span> <span class="heart">❤</span> <span class="txt">Some text 2</span> <span class="heart">❤</span> <span class="txt">Some text 3</span> <span class="heart">❤</span> <span class="txt">Some text 4</span> <span class="heart">❤</span> <span class="txt">Some text 5</span> <span class="heart">❤</span> <span class="txt">Some text 6</span> </footer>

It is necessary to make it so that at any block size only intermediate hearts are shown inside the line, but not extreme ones.

In the sample code in the second block, the heart should disappear after the 3rd text. And depending on the size of hiding extra.

The best option is to use pure css without a media query.

The markup code can be any, the main thing that would get the desired result.

    0