css - 截断一系列 div 中间的文本

Question

我有一个组件，目前会渲染如下内容:

Corvid/游戏/魔兽世界/ Assets / Angular 色模型/联盟/暗夜 Sprite /玛法里奥

我总是希望前两项和后两项可见，但是，如果可能的话，我希望中间的所有内容都被截断为 ... 。也就是说，如果上面的字符串要溢出包含的div，它应该有下面的结果

Corvid/游戏/.../暗夜 Sprite /玛法里奥

我试过制作如下结构:

<div className={styles.container}>
  <div className={styles.first}>
    {/** Contains first two items */}
  </div>
  <div className={styles.truncate}>
    {/** N arbitrary path items */}
  </div>
  <div className={styles.last}>
    {/** Last two items */}
  </div>
</div>

这可以用 CSS 实现吗？

Answer 1

有趣的问题 - 不幸的是，我看不到可靠的纯 CSS 解决方案。也就是说，除非可以编辑 HTML 结构，即使那样也会有一些硬编码，否则我不相信有可靠的纯 CSS 解决方案。

但是，这里有 3 种可能的解决方案:

1. 一个简单的 JavaScript 实用函数
2. 功能性(无状态)React 组件
3. 一个有状态的 React 组件

1。一个 JavaScript 函数

在下面的示例中，我创建了一个函数 truncateBreadcrumbs()它接受 3 个参数:

• selector - 匹配您要截断的元素的 CSS 选择器
• separator - 用于分隔元素的字符
• segments - 您要将字符串截断到的段数

它可以像这样使用:

truncateBreadcrumbs(".js-truncate", "/", 4);

这会找到类为 .js-truncate 的所有元素并将内容截断为 4 个元素，使用 ...中间的分隔符，例如:

Corvid / Games / ... / Night Elf / Malfurion

也可以使用奇数段，例如5会产生:

Corvid / Games / World of Warcraft / ... / Night Elf / Malfurion

如果segment参数等于或大于元素个数，不发生截断。

这是完整的工作示例:

function truncateBreadcrumbs(selector, separator, segments) {
  const els = Array.from(document.querySelectorAll(selector));

  els.forEach(el => {
    const split = Math.ceil(segments / 2);
    const elContent = el.innerHTML.split(separator);

    if (elContent.length <= segments) {
      return;
    }

    el.innerHTML  = [].concat(
      elContent.slice(0, split),
      ["..."],
      elContent.slice(-(segments-split))
    ).join(` ${separator} `);
  });
}

truncateBreadcrumbs(".js-truncate--2", "/", 2);
truncateBreadcrumbs(".js-truncate--4", "/", 4);
truncateBreadcrumbs(".js-truncate--5", "/", 5);

<div class="js-truncate--2">Corvid / Games / World of Warcraft / Assets / Character Models / Alliance / Night Elf / Malfurion</div>

<div class="js-truncate--4">Corvid / Games / World of Warcraft / Assets / Character Models / Alliance / Night Elf / Malfurion</div>

<div class="js-truncate--5">Corvid / Games / World of Warcraft / Assets / Character Models / Alliance / Night Elf / Malfurion</div>

<div class="js-truncate--4">Corvid / Games / Night Elf / Malfurion</div>

2。功能性(无状态)React 组件

看起来(基于 className 属性)您正在使用 React。如果是这种情况，我们可以创建一个简单的功能组件来截断文本。我把上面的代码变成了一个功能组件 <Truncate />它做同样的事情:

const Truncate = function(props) {
  const { segments, separator } = props;
  const split = Math.ceil(segments / 2);
  const elContent = props.children.split(separator);

  if (elContent.length <= segments) {
    return (<div>{props.children}</div>);
  }

  const newContent = [].concat(
    elContent.slice(0, split),
    ["..."],
    elContent.slice(-(segments-split))
  ).join(` ${separator} `);

  return (
    <div>{newContent}</div>
  )
}

它可以用作:

<Truncate segments="4" separator="/">
  Corvid / Games / World of Warcraft / Assets / Character Models / Alliance / Night Elf / Malfurion
</Truncate>

这是完整的工作示例:

const Truncate = function(props) {
  const { segments, separator } = props;
  const split = Math.ceil(segments / 2);
  const elContent = props.children.split(separator);

  if (elContent.length <= segments) {
    return (<div>{props.children}</div>);
  }

  const newContent = [].concat(
    elContent.slice(0, split),
    ["..."],
    elContent.slice(-(segments-split))
  ).join(` ${separator} `);

  return (
    <div>{newContent}</div>
  )
}

class App extends React.Component {
  render() {
    return (
      <div>
        <Truncate segments="2" separator="/">
          Corvid / Games / World of Warcraft / Assets / Character Models / Alliance / Night Elf / Malfurion
        </Truncate>

        <Truncate segments="4" separator="/">
          Corvid / Games / World of Warcraft / Assets / Character Models / Alliance / Night Elf / Malfurion
        </Truncate>

        <Truncate segments="5" separator="/">
          Corvid / Games / World of Warcraft / Assets / Character Models / Alliance / Night Elf / Malfurion
        </Truncate>

        <Truncate segments="4" separator="/">
          Corvid / Games / Night Elf / Malfurion
        </Truncate>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

3。一个有状态的 React 组件

我们还可以制作一个有状态组件来响应屏幕/元素的宽度。这是一个非常粗略的想法 - 一个测试元素宽度并在必要时截断它的组件。理想情况下，组件只会根据需要截断，而不是截断固定数量的段。

用法同上:

<Truncate segments="4" separator="/">
  Corvid / Games / World of Warcraft / Assets / Character Models / Alliance / Night Elf / Malfurion
</Truncate>

但不同之处在于组件会测试容器宽度以查看段是否适合，否则文本将被截断。单击“展开代码段”按钮以全屏方式查看演示，以便调整窗口大小。

class Truncate extends React.Component {
  constructor(props) {
    super(props);
    this.segments = props.segments;
    this.separator = props.separator;
    this.split = Math.ceil(this.segments / 2);
    this.state = {
      content: props.children
    } 
  }
  
  componentDidMount = () => {
    this.truncate();
    window.addEventListener("resize", this.truncate);
  }
  
  componentWillUnmount = () => {
    window.removeEventListener("resize", this.truncate);
  }
  
  truncate = () => {
    if (this.div.scrollWidth > this.div.offsetWidth) {
      const elContentArr = this.state.content.split(this.separator);
      this.setState({
        content: [].concat(
          elContentArr.slice(0, this.split),
          ["..."],
          elContentArr.slice(-(this.segments - this.split))
        ).join(` ${this.separator} `)
      })
    }
  }

  render() {
    return (
      <div className="truncate" ref={(el) => { this.div = el; }}>
        {this.state.content}
      </div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <Truncate segments="2" separator="/">
          Corvid / Games / World of Warcraft / Assets / Character Models / Alliance / Night Elf / Malfurion
        </Truncate>

        <Truncate segments="4" separator="/">
          Corvid / Games / World of Warcraft / Assets / Character Models / Alliance / Night Elf / Malfurion
        </Truncate>

        <Truncate segments="5" separator="/">
          Corvid / Games / World of Warcraft / Assets / Character Models / Alliance / Night Elf / Malfurion
        </Truncate>

        <Truncate segments="4" separator="/">
          Corvid / Games / Night Elf / Malfurion
        </Truncate>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

.truncate {
  display: block;
  overflow: visible;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>