Question

我有2个内联元素，它们由div（block）元素包裹。

div宽度是固定的，并且两个子级内联元素的内容长度是可变的。

我想在第二个子内容上使用省略号，这取决于第一个子元素的长度。

Ex）

<div class="wrapper">
    <p class="left">This should be displayed all + </p>
    <p class="right">This content should be ellipsised </p>
<div>

<div class="wrapper">
    <p class="left">Short + </p>
    <p class="right">This content should be ellipsised </p>
<div>

<div class="wrapper">
    <p class="left">depends on left size + </p>
    <p class="right">This content should be ellipsised </p>
<div>

预期：

This should be displayed all + This content ...
Short + This content should be ellipsised
depends on left size + This content should ...

因此，在包装器上似乎省略号，如果包装器的内容比包装器的内容长，我想将包装器的子内容省略号。

我该怎么做？

Answer 1

使用text-overflow: ellipsis：https://css-tricks.com/almanac/properties/t/text-overflow/

.wrapper{
width:300px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

}
.left,.right{
display: inline;
}

<div class="wrapper">
    <p class="left">This should be displayed all + </p>
    <p class="right">This content should be ellipsised </p>
<div>

<div class="wrapper">
    <p class="left">Short + </p>
    <p class="right">This content should be ellipsised </p>
<div>

<div class="wrapper">
    <p class="left">depends on left size + </p>
    <p class="right">This content should be ellipsised </p>
<div>

在内联或内联块元素上使用css省略号

1 个答案: