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?
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>
text-overflow: clip to it, so the ... appears at the cut-off.
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
A utility class ellipsis could be used here:
.ellipsis {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
