CSS text-overflow on label

Question

For my website I have a checkbox with a label next to it, but if the text in the label is longer than for example 60px, I want to cut off the text.

I know about the text-overflow: clip, this does exactly what I want, but for some reason it doesn't work on a label. And using a div instead isn't a really good solution, since you can't click on the text to select the checkbox then.

How can I do this?

Answer 1

label or span are inline by default. You cannot set width on inline elements. So make label inline-block

/// markup

<input type="checkbox"/> <label style="display: inline-block; width: 60px; overflow: hidden">Sample text sample text</label>

Answer 2

vertical-align: middle serves as a great solution here to align the label with the check-box and text-overflow: ellipsis for snipping the text with the three dots ... at the end.

The following snippet shows an example:

HTML:   
<input type="checkbox"/> 
    <label>Pretty awesome label to describe the uber cool checkbox. </label>

CSS:
    label {
      text-overflow: ellipsis;
      display: inline-block;
      overflow: hidden;
      width: 300px;
      white-space: nowrap;
      vertical-align: middle;
    }

Here is a fiddle for you - link

Answer 3

A utility class ellipsis could be used here:

.ellipsis {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}