```html
<div class="select-container" data-content="">
<select class="select" id="words">
<option value="lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</option>
<option value="lorem">Lorem</option>
<option value="ipsum">Ipsum</option>
<option value="dolor">Dolor</option>
<option value="sit">Sit</option>
<option value="amet">Amet</option>
</select>
</div>
.select-container {
position: relative;
display: inline-block;
}
.select-container::before {
content: attr(data-content);
pointer-events: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
left: 0;
padding: 7px;
font: 11px Arial, sans-serif;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-transform: capitalize;
}
select.value = "lorem ipsum dolor sit amet";
selectContainer.dataset.content = select.value;
function handleChange(e) {
selectContainer.dataset.content = e.currentTarget.value;
}
select.addEventListener("change", handleChange);
```
