Question

我有一个内部有固定宽度和文字的容器。我希望文本能够word-break: break-word到第二行，然后如果文本仍然太长，则将text-overflow: ellipsis添加到第二行。这有可能实现吗？

例如，badgerbadgerbadgerbadgerbadger将分为两行，而在第二行（因为它仍然太长），最后会有省略号。

const container = {
    maxWidth: '140px',
}

const textStyle = {
    display: 'block',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    maxWidth: '140px',
    textOverflow: 'ellipsis',
    wordBreak: 'break-word', //doesn't work
}

render() {
    return (
        <div style={container}>
            <p style={textStyle}>badgerbadgerbadgerbadgerbadger</p>
        </div>
    )
}

Answer 1

你可以这样做，但不像文本行那么容易。

有几种方法可以做到这一点。

检查出来：

Pure CSS multiline text with ellipsis

-webkit-line-clamp: xx(lines to show);

和

Line Clampin’ (Truncating Multiple Line Text)

Answer 2

你可以帮忙dotdotdot()功能：

阅读更多：http://dotdotdot.frebsite.nl/

Demo

Answer 3

通过伪元素的Crossbrowser解决方案。需要text-align: justify;并为伪元素设置相同的background-color作为父级的背景：

＆＃13;

/* styles for ellipsis '…' */ 
.block-with-text {
  /* hide text when we have more than N lines */
  overflow: hidden;
  /* for setting absolutely positioned ellisis '…' */
  position: relative;
  line-height: 1.2em;
  /* max-height = line-height × line number, 1.2 × 3 = 3.6 */
  max-height: 3.6em;
  text-align: justify;  
  /* place for ellipsis '…' */
  padding-right: 1em;
}

/* creating ellipsis … */
.block-with-text:before {
  content: "…";
  position: absolute;
  /* ellipsis move to right bottom corner */
  right: 0;
  bottom: 0;
}

/* hide ellipsis if we have text not more that maximum line numbers */
.block-with-text:after {
  content: "";
  position: absolute;
  /* move to the right bottom corner */
  right: 0;
  /* setting width и height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* hide ellipsis using white background */
  background: white;
}

＆＃13;

<div class="block-with-text">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

＆＃13;

Answer 4

对于webkit浏览器，您可以使用此CSS：

＆＃13;

$query->andFilterWhere([
    'table1.column1' => $param1,
    'table1.column2' => $param2,
    'table1.column3' => $param3,
]);

＆＃13;

.block-with-text {
  border: 1px solid #000;
  padding: 5px;
  display: block;
  display: -webkit-box;
  max-width: 400px;
  -webkit-line-clamp: 4; /* max line number */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

＆＃13;

分词结合文本溢出

4 个答案: