Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
A
ant-design-pro
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
duanledexianxianxian
ant-design-pro
Commits
43add560
Commit
43add560
authored
Nov 16, 2017
by
nikogu
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Fixed:
https://github.com/ant-design/ant-design-pro/issues/212
parent
5a61434c
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
33 additions
and
13 deletions
+33
-13
package.json
package.json
+1
-1
src/components/Ellipsis/index.js
src/components/Ellipsis/index.js
+31
-12
src/components/Ellipsis/index.less
src/components/Ellipsis/index.less
+1
-0
No files found.
package.json
View file @
43add560
{
"name"
:
"ant-design-pro"
,
"version"
:
"0.2.3-rc.
1
"
,
"version"
:
"0.2.3-rc.
2
"
,
"description"
:
"An out-of-box UI solution for enterprise applications"
,
"private"
:
true
,
"scripts"
:
{
...
...
src/components/Ellipsis/index.js
View file @
43add560
...
...
@@ -6,7 +6,7 @@ import styles from './index.less';
/* eslint react/no-did-mount-set-state: 0 */
/* eslint no-param-reassign: 0 */
const
isSupportLineClamp
=
(
document
.
body
.
style
.
webkitLineClamp
!==
undefined
);
const
isSupportLineClamp
=
!
(
document
.
body
.
style
.
webkitLineClamp
!==
undefined
);
const
EllipsisText
=
({
text
,
length
,
tooltip
,
...
other
})
=>
{
if
(
typeof
text
!==
'
string
'
)
{
...
...
@@ -56,9 +56,20 @@ export default class Ellipsis extends Component {
const
{
lines
}
=
this
.
props
;
if
(
lines
&&
!
isSupportLineClamp
)
{
const
text
=
this
.
shadowChildren
.
innerText
;
const
targetHeight
=
this
.
root
.
offsetHeight
;
const
lineHeight
=
parseInt
(
getComputedStyle
(
this
.
root
).
lineHeight
,
10
);
const
targetHeight
=
lines
*
lineHeight
;
this
.
content
.
style
.
height
=
`
${
targetHeight
}
px`
;
const
totalHeight
=
this
.
shadowChildren
.
offsetHeight
;
const
shadowNode
=
this
.
shadow
.
firstChild
;
if
(
totalHeight
<=
targetHeight
)
{
this
.
setState
({
text
,
targetCount
:
text
.
length
,
});
return
;
}
// bisection
const
len
=
text
.
length
;
const
mid
=
Math
.
floor
(
len
/
2
);
...
...
@@ -80,10 +91,10 @@ export default class Ellipsis extends Component {
shadowNode
.
innerHTML
=
text
.
substring
(
0
,
mid
)
+
suffix
;
let
sh
=
shadowNode
.
offsetHeight
;
if
(
sh
<
th
)
{
if
(
sh
<
=
th
)
{
shadowNode
.
innerHTML
=
text
.
substring
(
0
,
mid
+
1
)
+
suffix
;
sh
=
shadowNode
.
offsetHeight
;
if
(
sh
>
=
th
)
{
if
(
sh
>
th
)
{
return
mid
;
}
else
{
begin
=
mid
;
...
...
@@ -97,7 +108,7 @@ export default class Ellipsis extends Component {
shadowNode
.
innerHTML
=
text
.
substring
(
0
,
mid
-
1
)
+
suffix
;
sh
=
shadowNode
.
offsetHeight
;
if
(
sh
<=
th
)
{
return
mid
;
return
mid
-
1
;
}
else
{
end
=
mid
;
mid
=
Math
.
floor
((
end
-
begin
)
/
2
)
+
begin
;
...
...
@@ -110,6 +121,10 @@ export default class Ellipsis extends Component {
this
.
root
=
n
;
}
handleContent
=
(
n
)
=>
{
this
.
content
=
n
;
}
handleNode
=
(
n
)
=>
{
this
.
node
=
n
;
}
...
...
@@ -178,13 +193,17 @@ export default class Ellipsis extends Component {
ref
=
{
this
.
handleRoot
}
className
=
{
cls
}
>
{
tooltip
?
(
<
Tooltip
title
=
{
text
}
>
{
childNode
}
<
/Tooltip
>
)
:
childNode
}
<
div
className
=
{
styles
.
shadow
}
ref
=
{
this
.
handleShadowChildren
}
>
{
children
}
<
/div
>
<
div
className
=
{
styles
.
shadow
}
ref
=
{
this
.
handleShadow
}
><
span
>
{
text
}
<
/span></
div
>
<
div
ref
=
{
this
.
handleContent
}
>
{
tooltip
?
(
<
Tooltip
title
=
{
text
}
>
{
childNode
}
<
/Tooltip
>
)
:
childNode
}
<
div
className
=
{
styles
.
shadow
}
ref
=
{
this
.
handleShadowChildren
}
>
{
children
}
<
/div
>
<
div
className
=
{
styles
.
shadow
}
ref
=
{
this
.
handleShadow
}
><
span
>
{
text
}
<
/span></
div
>
<
/div
>
<
/div
>
);
}
...
...
src/components/Ellipsis/index.less
View file @
43add560
...
...
@@ -2,6 +2,7 @@
overflow: hidden;
display: inline-block;
word-break: break-all;
width: 100%;
}
.lines {
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment