/* eslint-disable no-script-url */
/**
 * title: "超长字段/隐藏字段"
 * description: "通过设置maxNode属性设置最多显示字段，超出省略。"
 */
import React from 'react';
import { Breadcrumb } from '@alicloud/console-components';

const spanStyle = {
  display: 'inline-block',
  width: '160px',
  textOverflow: 'ellipsis',
  overflow: 'hidden',
};

export default function Demo2() {
  return (
    <>
      <Breadcrumb maxNode={5}>
        <Breadcrumb.Item link="javascript:void(0)">无影云电脑</Breadcrumb.Item>
        <Breadcrumb.Item link="javascript:void(0)">
          <span style={spanStyle}>
            用户与管理员名称实例管理用户与管理员名称实例管理
          </span>
        </Breadcrumb.Item>
        <Breadcrumb.Item link="javascript:void(0)">组织ID</Breadcrumb.Item>
        <Breadcrumb.Item link="javascript:void(0)">组织ID</Breadcrumb.Item>
        <Breadcrumb.Item>策略</Breadcrumb.Item>
      </Breadcrumb>
      <br />
      <Breadcrumb maxNode={5}>
        <Breadcrumb.Item link="javascript:void(0)">无影云电脑</Breadcrumb.Item>
        <Breadcrumb.Item link="javascript:void(0)">
          用户与管理员
        </Breadcrumb.Item>
        <Breadcrumb.Item link="javascript:void(0)">组织ID</Breadcrumb.Item>
        <Breadcrumb.Item link="javascript:void(0)">组织ID</Breadcrumb.Item>
        <Breadcrumb.Item link="javascript:void(0)">组织ID</Breadcrumb.Item>
        <Breadcrumb.Item>策略</Breadcrumb.Item>
      </Breadcrumb>
    </>
  );
}