0

We have a simple text container and we append some text into it using javascript.

The problem is when text is long we can only see a portion of it and the rest of the text will be hidden.

What if we want to adapt the font size so that even very long texts can fit in the container.

I have tried multiple solutions on StackOverflow but none of them worked correctly for me.

Note: We need the viewport units and position: absolute and one line sentence.

let upperGuideText = document.getElementById("upperGuideText");

let guide = "This is a very very very very very very very very very very long text here."
setTimeout(function(){
      upperGuideText.innerHTML = `${guide}`;
}, 500);
.upperGuideContainer {
    position: absolute;
    overflow: hidden;
    left: 10vw;
    top: 51vh;
    height: 12vh;
    width: 88vw;   
    outline: 0.1vw dashed orange;
}

.upperGuide {
    position: absolute;
     overflow: hidden;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 3.5vw;
    color: rgb(128, 128, 128);
    left: 0.5vw;
    top: -11.4vh;
    opacity: 1;
    text-align: justify;
    text-justify: inter-word;
}
<div class = "upperGuideContainer">
 <p id="upperGuideText" class="upperGuide"></p>
</div>
Sara Ree
  • 3,417
  • 12
  • 48
  • As I said I have tried StackOverflow similar questions and answers and none of them solved my problem... and I bet you can not prepare a correct solution for the question @Paulie_D :) – Sara Ree Dec 05 '19 at 21:59
  • You have to explain **why** the linked duplicate questions and many answers did not work for you. What makes **your** question different? Just "not working" is not sufficient. – Paulie_D Dec 05 '19 at 22:52
  • https://meta.stackoverflow.com/questions/252252/this-question-may-already-have-an-answer-here-but-it-does-not-or-what-ca – Paulie_D Dec 05 '19 at 22:54

0 Answers0