JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css">
<div id="target"></div>
<div id="target2"></div>
CSS
.bigSelect .dijitSelectLabel {
text-align:left;
overflow: hidden;
width:150px;
}
.smallSelect .dijitSelectLabel {
text-align:left;
overflow: hidden;
width:100px;
}
JavaScript
require(["dijit/form/Select",
"dojo/data/ObjectStore",
"dojo/store/Memory",
"dojo/domReady!"
], function(Select, ObjectStore, Memory){
var store = new Memory({
data: [
{ id: "foo", label: "Foo" },
{ id: "bar", label: "VeryVeryVeryVeryLongLabel" }
]
});
var os = new ObjectStore({ objectStore: store });
var s = new Select({
store: os,
class: "bigSelect"
}, "target");
s.startup();
var s2 = new Select({
store: os,
class: "smallSelect"
}, "target2");
s2.startup();
})