Как посчитать ширину текста в блоке?

Question

Как посчитать ширину текста в блоке?

Рейтинг: 0Ответов: 0Опубликовано: 24.08.2023

Хотел реализовать адаптивный текст , но столкнулся с проблемой что при маленьких разрешениях , размер шрифта очень мелкий , хотел бы переделать формулу , чтобы она еще учитывала ширину текста внутри этого блока, но как вывести ширину текста внутри блока я не могу нигде найти ?

const app = new Vue({
    el: '#app',
    data: {
        descriptionBlockStyle: {}
    },
    methods: {
        updateDescriptionBlockWidth() {
            let containerWidth = this.$refs.descriptionBlock.clientWidth;
            let fontSize;
    
            if (containerWidth >= 534) {
                fontSize = '1.85185vh';
            } else {
                let maxFontSize = 1.85185;
                let scaleFactor = containerWidth / 534;
                fontSize = (maxFontSize * scaleFactor) + 'vh';
            }

            this.descriptionBlockStyle = { fontSize };
            const textElement = document.querySelector('.description');
            const rect = textElement.getBoundingClientRect();
            console.log(rect)
        }
    },
    computed: {

    },
    mounted() {
        this.$nextTick(() => {
            this.updateDescriptionBlockWidth();
            window.addEventListener('resize', this.updateDescriptionBlockWidth);
        });
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.updateDescriptionBlockWidth);
    },

});

.list__iconnew {
  margin-top: 2.40741vh;
  width: 100%;
  max-width: 157.59259vh;
  display: flex;
  justify-content: space-between;
}

.item__icon {
  border: 1px solid red;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(33.9% - 2%);
  height: 36.85185vh;
  border-radius: 3.33333vh;
  overflow: hidden;
}
.description {
  position: absolute;
  width: 100%;
  padding: 0 5.88%;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.07407vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="list__iconnew" id="app">
            <div class="item__icon">
               <div class="description" ref="descriptionBlock" :style="descriptionBlockStyle">
                  Lorem ipsum dolor sit amet consectetur <br>
                  adipisicing elit. Quisquam esse, explicabo,<br>
                  expedita laborum harum tempora corrupti totam <br> 
                  ipsam voluptate, dolorem quibusdam quaerat <br> 
                  deserunt iusto et cumque nam veritatis obcaecati ipsa.
               </div>
            </div>
            <div class="item__icon">
               <div class="description" ref="descriptionBlock" :style="descriptionBlockStyle">
                  Lorem ipsum dolor sit amet consectetur <br>
                  adipisicing elit. Quisquam esse, explicabo,<br>
                  expedita laborum harum tempora corrupti totam <br> 
                  ipsam voluptate, dolorem quibusdam quaerat <br> 
                  deserunt iusto et cumque nam veritatis obcaecati ipsa.
               </div>
            </div>
            <div class="item__icon">
               <div class="description" ref="descriptionBlock" :style="descriptionBlockStyle">
                  Lorem ipsum dolor sit amet consectetur <br>
                  adipisicing elit. Quisquam esse, explicabo,<br>
                  expedita laborum harum tempora corrupti totam <br> 
                  ipsam voluptate, dolorem quibusdam quaerat <br> 
                  deserunt iusto et cumque nam veritatis obcaecati ipsa.
               </div>
            </div>
         </div>

javascript vue.js

Источник: Stack Overflow на русском

Как посчитать ширину текста в блоке?

Ответы