The problem of render in antdesign table

problem description

if there is a need to wrap lines in antdesign, only one line appears with an ellipsis. When the mouse is moved in, the content with ellipsis renders a bubble showing all the contents. I control line breaks with ellipses through css. How can I tell which td nodes with ellipses have bubbles.

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)
rendering code in table:
let newColumns = columns.map (v = > {

)

  if(!v.render){
    v.render = (text, record, index) =>
       <Popover content = {text}><span className="tab-text">{text}</span></Popover>
  }
  return v
})
css:
.tab-text{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
}

what result do you expect? What is the error message actually seen?

you can get the node where the bubble comes out, but not all the content has bubbles