kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-04-24 04:15:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ellipsis): set the height of ellipsis manually

Browse Source
This commit is contained in:
unix
2020-06-26 07:52:32 +08:00
parent 965654f91a
commit 228bf62fc3
3 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/shared/__tests__/__snapshots__/ellipsis.test.tsx.snap
View File

@@ -6,6 +6,7 @@ exports[`Ellipsis should render correctly 1`] = `
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 10px;
min-width: 0;
}
</style></span></div>"

2
components/shared/__tests__/ellipsis.test.tsx
View File

@@ -6,7 +6,7 @@ describe('Ellipsis', () => {
it('should render correctly', () => {
const wrapper = mount(
<div style={{ width: '1px' }}>
<Ellipsis>text</Ellipsis>
<Ellipsis height="10px">text</Ellipsis>
</div>,
)
expect(wrapper.html()).toMatchSnapshot()

7
components/shared/ellipsis.tsx
View File

@@ -1,6 +1,10 @@
import React from 'react'
const Ellipsis: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
export type EllipsisProps = {
height: string
}
const Ellipsis: React.FC<React.PropsWithChildren<EllipsisProps>> = ({ children, height }) => {
return (
<span>
{children}
@@ -9,6 +13,7 @@ const Ellipsis: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: ${height};
min-width: 0;
}
`}</style>