react-ellipsis-middle

Ellipsis in middle for single line text.

installation

npm install -S @jswork/react-ellipsis-middle

usage

1. import css

@import "~@jswork/boilerplate-react-component/dist/style.css";

// or use sass
@import "~@jswork/boilerplate-react-component/dist/style.scss";

// customize your styles:
$boilerplate-react-component-options: ()

2. import js

import React from 'react';
import ReactEllipsisMiddle from '@jswork/boilerplate-react-component';
import styled from 'styled-components';
import '../../src/components/style.scss';

const Container = styled.div`
  width: 600px;
  margin: 50px auto;
  border-radius: 8px;
  padding: 15px;
  overflow: hidden;
  resize: horizontal;
  box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;

  .react-ellipsis-middle {
    cursor: pointer;
    &:hover {
      transition: all 0.5s ease;
      background-color: #f60;
    }
  }
`;

export default (props: any) => {
  return (
    <Container>
      <ReactEllipsisMiddle size="120px">
        CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧
        - 2021-03-26
      </ReactEllipsisMiddle>

      <ReactEllipsisMiddle size="50%">
        CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧
        - 2021-03-26
      </ReactEllipsisMiddle>

      <ReactEllipsisMiddle>CSS 实现优惠券的技巧 - 2021-03-26</ReactEllipsisMiddle>
      <ReactEllipsisMiddle minSize="40px">
        我是一个很长的文件，我是一个很长的文件，但请始终保持我的后缀名.pdf
      </ReactEllipsisMiddle>
    </Container>
  );
};

preview

• https://afeiship.github.io/react-ellipsis-middle/

license

Code released under the MIT license.