Search code examples
reactjswebkitjss

How to use webkit with JSS?


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.


Solution

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