I am currently working on a react web application. I use JSS to create styles.
In order to accomplish pure CSS multi-line text trimming, I need to use webkit.
Here is the class in which I try to use webkit :
textSearchProductTitle: {
fontWeight: "bolder",
fontSize: 40,
display: "-webkit-box",
maxWidth: "100%",
height: 40*1.3*3,
margin: "0 auto",
lineHeight: 1.3,
//Those two properties don't work
'&::-webkit-line-clamp': 1.3,
'&::-webkit-box-orient': "vertical",
overflow: "hidden",
textOverflow: "ellipsis",
},
Since the webkit attributes don't work, I guess my syntax is not correct. So my question is : what is the correct syntax to use webkit in JSS ?
Thanks in advance.
JSS is adding prefixes when needed if it's used with the default preset. This should do it.
textSearchProductTitle: {
fontWeight: "bolder",
fontSize: 40,
display: "box",
maxWidth: "100%",
height: 40*1.3*3,
margin: "0 auto",
lineHeight: 1.3,
lineClamp': 1.3,
boxOrient: "vertical",
overflow: "hidden",
textOverflow: "ellipsis",
},