0

I'm looking for a solution to this problem:

I have a lwc that get passed a text and displays it, but when it's too long (being a title I can't truncate it) I'd need to resize it, to make sure the entire text is displayed and fits his container.

How can I do this?

Thanks

JS

import { LightningElement, api } from 'lwc';
export default class LwcAppStoreTile extends LightningElement {
@api appname;
}

HTML + CSS

<template>
    <div class="class1">{appname}</div>
</template>

.class1 {
    height: 30px;
    width: 182px;
}
Improve this question
  • Can you show some image with some code what are you trying to achieve? – Nagendra Singh Jan 13 at 12:27
  • I added the code, not that makes much difference – Francesco Ghiselli Jan 13 at 12:40
  • It has fixed width and height. Should it resize horizontally or vertically? – RubenDG Jan 13 at 17:59
  • I need to resize the text, not the container – Francesco Ghiselli Jan 14 at 15:42
0

I know 2 ways to adjust font-size function to the size of the screen :

  1. The most simple is to use the vw unit which represent 1/100e of viewport size (more info):

yourfile.css

h1 { font-size: 8vw }
h2 { font-size: calc(1em + 5vw) }
  1. Use media query in your css : https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Improve this answer
  • I don't need the text to resize based on the screen. The text need the fit inside a div with certain dimensions. – Francesco Ghiselli Jan 14 at 14:57
  • I dont find anything else in case of LWC. I think the best parctice here is to use vw unit. Other way you have external libraries but I personally prefert avoid them as much as possible => css-tricks.com/fitting-text-to-a-container/… – Badbaxx Jan 15 at 8:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.