How to truncate the selected value in the select tag?

Question

HTML

It is necessary to trim the selected value to 10 characters in the drop-down menu.
Those. I have

<select>
    <option>дядя Вася</option>
    <option>Иванов Иван Иванович</option>
    <option>дядя Саша</option>
</select>

And when we select "Ivanov Ivan Ivanovich" it is necessary that it visually look like this in the tag "Ivanov Ivan Ivanovich ...", but in the drop-down list there was still "Ivanov Ivan Ivanovich"
How to do this?
Because I'm doing the interface on react.js, can anyone tell me if there are any features that would make it so in it.

Answer 1

jsfiddle.net/yjeAN/3