How to limit text in input type button?

Question

How can i limit text of button? Just to trim some long text inside button. All I'm allowed to do is only change the CSS

<html>

<body>
  <input style="?" type="button" value="Trim long long long long long long long text that goes beyond a specified length" />
</body>

</html>

[It may answer your question, enter here](https://stackoverflow.com/questions/600438/css-to-hide-input-button-value-text) — Yarin Levi, Jan 25 '22 at 07:44
Specify _"a specific length"_. Do you want the input to be 100px wide or do you want the input to show _n_ characters? — Fabian S., Jan 25 '22 at 07:44
If you already know that there is too much text in that value, why not shorten it? — Nico Haase, Jan 25 '22 at 07:45
If you can't change the HTML element yourself what are you allowed to change? Adding to a stylesheet or adding some Javascript or... — A Haworth, Jan 25 '22 at 08:04
I apologize for not specifying - all I'm allowed to do is only change the CSS — Lethargicaa, Jan 25 '22 at 08:18
Feel free to add all clarification to your question by editing it. This should also contain how the result should look like, and what you've tried to resolve the problem — Nico Haase, Jan 25 '22 at 08:20
@FabianS. yes, for example 100px, how to specify it in the style? — Lethargicaa, Jan 25 '22 at 08:20

score 1 · Accepted Answer · answered Jan 25 '22 at 10:25

To make the input match a specific length in pixels (e.g. 100px) you need to set the width. This will make your input take 100px width.

To get a proper text overflow you add overflow:hidden and text-overflow:ellipsis.

Lastly add your text into the title attribute too, so you get the full text as tooltip when hovering the button - This is optional but i'd strongly recommend it for accessibility reasons.

.trimmedbutton {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

<html>

<body>
  <input class="trimmedbutton" type="button" value="Trim long long long long long long long text that goes beyond a specified length" title="Trim long long long long long long long text that goes beyond a specified length" />
</body>

</html>

How to limit text in input type button?

1 Answers1