Ad

How To Use Webkit With JSS?

- 1 answer

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.

Ad

Answer

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",

},
Ad
source: stackoverflow.com
Ad