Label
<div class="wrapper"> <ef-label class="animation"> Universal basic income (UBI) is a government program in which every adult citizen receives a set amount of money on a regular basis. The goals of a basic income system are to alleviate poverty and replace other need-based social programs that potentially require greater bureaucratic involvement. </ef-label> <hr> <ef-label line-clamp="1" class="animation"> Universal basic income (UBI) is a government program in which every adult citizen receives a set amount of money on a regular basis. The goals of a basic income system are to alleviate poverty and replace other need-based social programs that potentially require greater bureaucratic involvement. </ef-label> <hr> <ef-label line-clamp="2" class="animation"> Universal basic income (UBI) is a government program in which every adult citizen receives a set amount of money on a regular basis. The goals of a basic income system are to alleviate poverty and replace other need-based social programs that potentially require greater bureaucratic involvement. </ef-label> </div>
@keyframes resize { from { width: 95%; } to { width: 60%; } } .wrapper { display: flex; flex-direction: column; border: 1px solid #9ea8f4; width: 100%; animation: resize ease-in-out 3s alternate infinite; height: 120px; } ef-label.animation { padding: 0px 20px; margin: 10px 0px; } hr { background: #9ea8f4; margin: 0px; width: 100%; height: 1px; }
ef-label
is a responsive text container that provides automatic ellipsis and middle truncation. A tooltip is shown if the text does not fit.
Basic Usage
Wrap the text with ef-label
. Middle truncation and tooltip are applied automatically.
<ef-label style="width:400px"> Universal basic income (UBI) is a government program in which every adult citizen receives a set amount of money on a regular basis. The goals of a basic income system are to alleviate poverty and replace other need-based social programs that potentially require greater bureaucratic involvement. </ef-label>
ef-label { margin: 10px 0 120px 0; }
<ef-label style="width:400px">
Universal basic income (UBI) is a government program in which every adult citizen receives a set amount of money on a regular basis. The goals of a basic income system are to alleviate poverty and replace other need-based social programs that potentially require greater bureaucratic involvement.
</ef-label>
Line clamp
Use line-clamp
attribute to handle the maximum number of lines to display.
<ef-label style="width:400px" line-clamp="1"> Universal basic income (UBI) is a government program in which every adult citizen receives a set amount of money on a regular basis. The goals of a basic income system are to alleviate poverty and replace other need-based social programs that potentially require greater bureaucratic involvement. </ef-label> <br> <ef-label style="width:400px" line-clamp="2"> Universal basic income (UBI) is a government program in which every adult citizen receives a set amount of money on a regular basis. The goals of a basic income system are to alleviate poverty and replace other need-based social programs that potentially require greater bureaucratic involvement. </ef-label>
ef-label { margin: 5px 0px 45px; }
<ef-label style="width:400px" line-clamp="1">
Universal basic income (UBI) is a government program in which every adult citizen receives a set amount of money on a regular basis. The goals of a basic income system are to alleviate poverty and replace other need-based social programs that potentially require greater bureaucratic involvement.
</ef-label>
<br/>
<ef-label style="width:400px" line-clamp="2">
Universal basic income (UBI) is a government program in which every adult citizen receives a set amount of money on a regular basis. The goals of a basic income system are to alleviate poverty and replace other need-based social programs that potentially require greater bureaucratic involvement.
</ef-label>
API Reference
Attributes
number
line-clamp
Limit the number of lines before truncating
boolean
error
Set state to error
boolean
warning
Set state to warning
Properties
number
lineClamp
Limit the number of lines before truncating
0
boolean
error
Set state to error
false
boolean
warning
Set state to warning
false