wix-style-react/dist/src/common/Ellipsis/Ellipsis.st.css

wix-style-react

@property --maxLines;

:import {
  -st-from: "../../Tooltip/Tooltip.st.css";
  -st-default: Tooltip;
}

/* Text */
.text {
  -st-states:ellipsisLines(enum(singleLine, multiline));
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  max-width: 100% !important;
  vertical-align: bottom !important;
}

.text:ellipsisLines(singleLine) {
  white-space: nowrap !important;
  display: inline-block !important;
}

.text:ellipsisLines(multiline) {
  white-space: normal !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-line-clamp: var(--maxLines);
  -moz-line-clamp: var(--maxLines);
}

/* Fix for Safari native tooltips */
/* See: https://stackoverflow.com/a/43915246 */
.text::after {
  content: '';
  display: block;
}

/* Tooltip */
.tooltip {
  -st-extends: Tooltip;
  display: inline;
  overflow: hidden;
  height: max-content;
}

.tooltip::element {
  max-width: 100%;
}

/* st-namespace-reference="../../../../src/common/Ellipsis/Ellipsis.st.css" */