Is it possible to set a max width of a label in HTML?

Question

I want that a label in HTML has a max width of like 100px and if this label has a text that is longer than 100px it gets cut off. A perfect result would be a cut and some points ".." at the end.

I have:

<label> This is some long text on my website </label>

Desired result would be something like:

This is some lo..

Is this possible with CSS alone? For a start it would be okay if it only gets cut at the end. Thank you in advance!

I tried to set the width to 100px in CSS but that only changes the size of e.g. the backgroundcolor of the label and not the text.

As `label` is an **inline** element, put `display: inline-block` so the `width` works - [reference](http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block). To "cutoff", use `overflow: hidden`. — Vucko, Feb 17 '16 at 09:53
@Vucko the overflow:hidden did the trick. Thank you very much — Jonas, Feb 17 '16 at 09:54

score 11 · Accepted Answer · answered Feb 17 '16 at 09:55

11

label {
  width : 130px;
  overflow:hidden;
  display:inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<label> This is some long text on my website </label>

answered Feb 17 '16 at 09:55

Kudos

1,084
8
21

Thank you. I was missing overflow:hidden; – Jonas Feb 17 '16 at 09:56

Is it possible to set a max width of a label in HTML?

1 Answers1