所以我有一个自动提取的反应组件。基本上,当您开始搜索时,它会弹出一个建议容器。我的问题是,一些标题非常长,打开的容器会切断文本。我知道我可以让搜索框更大,容器的大小也会增加但是从UI的角度来看这似乎很愚蠢,因为如果我在autosuggest容器中有一篇很长的文章,我的搜索框就必须更长。这是我的样式代码
const styles = theme => ({
root: {
height: 250,
flexGrow: 1,
},
container: {
position: 'relative',
},
suggestionsContainerOpen: {
position: 'absolute',
zIndex: 2,
marginTop: theme.spacing.unit,
left: 0,
right: 0,
},
suggestion: {
display: 'block',
},
suggestionsList: {
margin: 0,
padding: 0,
listStyleType: 'none',
},
input: {
width: 240,
},
});
发布于 2018-10-25 16:14:40
你可以使用CSS text-overflow
属性来处理它,取决于你是否要剪辑额外的文本或将它们变成点。
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; //or hidden if you want to clip them off
max-width: <width of the container you want to make>;
}
https://stackoverflow.com/questions/-100002984
复制相似问题