0

I'm not even sure what to call what I'm trying to do other than what I said in the title, but in more words:

I have a two-line textarea input box that allows the user to enter a text value up to a maximum character limit on one web-page. After the value is entered it is saved in a database. This value is long so it can be pretty descriptive and unique. It used on several pages, where it is shown in the two line format as it was typed in.

However, on another page, I have to display this text value as a one line web-page title in xx-large bold letters.

The tricky part, at least for me, is that if the text value overflows the one-line text area, I need to reduce the font-size of the text area until the text value does fit without clipping.

My initial thought was determine if the text overflow a textarea element by nesting it inside of a div with a fixed width so the div never grew and prevented the inner textarea's overflow from being seen. Then compare the widths of the two elements. If the textarea's was smaller or equal to the parent div's width, then I'd leave the font-size as it was initially set. If the textarea's width was larger, then I'd decrement the font-size and check the widths again; repeating this until the the content fit or reached some lower, yet still readable, limit, where font-size is small enough to fit in this web-page's textarea when wrapped over two lines as it did when initially entered on the first page.

My using a textarea in a div, was because the title sizing appears while a user can see the web-page, so fixing the div's width prevents the text from pushing other page elements out of their proper place.

I'm using a textarea so that the contents display the same as when they were entered. Switching to a inner div might cause things to display differently than when it was originally entered.

I realize that it would be much simpler to also ask the user to enter a long and short version of the text value, but this isn't an option.

This issue has nothing to do with the browser window being resized. Once the page is rendered, the page with this title does not need to scale to fit.

But, before coding my initial solution, I thought I'd ask if there was already a CSS solution for this or if someone could point me to where this has already done.

Oh, and this isn't a homework assignment.

Thanks

  • I would use a div with display:inline-block inside a div with a display:block. Set the width of the outside div to whatever you want. Then proceed as your logic suggests. also, check this out https://css-tricks.com/fitting-text-to-a-container/ – DCR Feb 04 '21 at 03:31
  • Thanks. If it weren't for the issue that the user can enter text or combinations of letters that work differently in a div than the original textarea, that would be ideal. –  Feb 04 '21 at 03:39
  • To the person that currates these questions, I don't see how my question fits in the solution you suggest. I'm not resizing my window and then wanting to resize my fields accordingly. Instead, I want my field's size fixed, but the font's size scaled based on the amount of content. When I looked at the suggestions, they all deal with making the field and it's content larger or smaller based on the size of the window. What I want is completely different. –  Feb 05 '21 at 02:09

0 Answers0