如何更正药丸中的重叠文本
How to correct overlapping text in pill
https://jsbin.com/dizixeg/edit?output
我已经使用 SnappySnippet 将 HTML/CSS 快速复制到 jsBin。
我试过了,没有用。最好能为我工作 overflow:ellipses
- 分词:分词;
- 断字:全部断字;
- 白色-space: 前;
- 文本溢出:省略号;
这是我的代码
#DIV_1 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
float: left;
height: 163px;
left: 0px;
min-height: 1px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 665px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 332.5px 81.5px;
transform-origin: 332.5px 81.5px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
margin: 0px 0px 15px;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 15px;
}/*#DIV_1*/
#DIV_1:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_1:after*/
#DIV_1:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_1:before*/
#LABEL_2 {
box-sizing: border-box;
color: rgb(51, 51, 51);
display: inline-block;
height: 28px;
max-width: 100%;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
width: 56.25px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 28.125px 14px;
transform-origin: 28.125px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
margin: 0px 0px 5px;
outline: rgb(51, 51, 51) none 0px;
}/*#LABEL_2*/
#LABEL_2:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
outline: rgb(51, 51, 51) none 0px;
}/*#LABEL_2:after*/
#LABEL_2:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
outline: rgb(51, 51, 51) none 0px;
}/*#LABEL_2:before*/
#DIV_3 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 130px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 635px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 317.5px 65px;
transform-origin: 317.5px 65px;
caret-color: rgb(51, 51, 51);
border: 1px solid rgb(204, 204, 204);
border-radius: 5px 5px 5px 5px;
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
overflow: auto scroll;
padding: 0px 0px 0px 10px;
}/*#DIV_3*/
#DIV_3:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_3:after*/
#DIV_3:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_3:before*/
#DIV_4 {
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 27px;
min-width: 60px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
width: 597px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 298.5px 13.5px;
transform-origin: 298.5px 13.5px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
margin: 14px 10px 2px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_4*/
#DIV_4:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_4:after*/
#DIV_4:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_4:before*/
#DIV_5 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 28px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 597px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 298.5px 14px;
transform-origin: 298.5px 14px;
caret-color: rgb(51, 51, 51);
border: 1px solid rgb(215, 215, 215);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
margin: 0px 0px 20px;
outline: rgb(51, 51, 51) none 0px;
padding: 14px 15px 0px 5px;
transition: opacity 0.15s linear 0s;
}/*#DIV_5*/
#DIV_6 {
bottom: 15px;
box-sizing: border-box;
color: rgb(101, 101, 101);
float: right;
height: 27px;
left: 15px;
opacity: 0.9;
position: relative;
right: -15px;
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
top: -15px;
width: 27.7969px;
column-rule-color: rgb(101, 101, 101);
perspective-origin: 13.8906px 13.5px;
transform-origin: 13.8984px 13.5px;
caret-color: rgb(101, 101, 101);
border-top: 0px none rgb(101, 101, 101);
border-right: 0px none rgb(101, 101, 101);
border-bottom: 0px none rgb(101, 101, 101);
border-left: 1px solid rgb(215, 215, 215);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
padding: 0px 6px;
}/*#DIV_6*/
#DIV_6:after {
box-sizing: border-box;
color: rgb(101, 101, 101);
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
column-rule-color: rgb(101, 101, 101);
caret-color: rgb(101, 101, 101);
border: 0px none rgb(101, 101, 101);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
}/*#DIV_6:after*/
#DIV_6:before {
box-sizing: border-box;
color: rgb(101, 101, 101);
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
column-rule-color: rgb(101, 101, 101);
caret-color: rgb(101, 101, 101);
border: 0px none rgb(101, 101, 101);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
}/*#DIV_6:before*/
#SPAN_7 {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#SPAN_7*/
#SPAN_7:after {
word-wrap:
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#SPAN_7:after*/
#SPAN_7:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#SPAN_7:before*/
#DIV_8 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
display: inline-block;
height: 0px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 0px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
margin: -6px 0px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_8*/
#DIV_8:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_8:after*/
#DIV_8:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_8:before*/
<div id="DIV_1">
<label id="LABEL_2">
Invitees
</label>
<div id="DIV_3">
<div id="DIV_4">
<div id="DIV_5">
<div id="DIV_6">
×
</div>
<span id="SPAN_7">A very very long name A very very long name A very very long name <longname@longname.com></span>
<div id="DIV_8">
</div>
</div>
<div id="DIV_5">
<div id="DIV_6">
×
</div>
<span id="SPAN_7">Normal length contact<contact@somname.com></span>
<div id="DIV_8">
</div>
</div>
</div>
</div>
</div>
这是一个使用 text-overflow:ellipsis
的可能解决方案(新的 CSS 位于代码底部,在 Fix 注释下方)。
作为一般性建议,我会简化代码结构以使其更易于处理。
#DIV_1 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
float: left;
height: 163px;
left: 0px;
min-height: 1px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 665px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 332.5px 81.5px;
transform-origin: 332.5px 81.5px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
margin: 0px 0px 15px;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 15px;
}
/*#DIV_1*/
#DIV_1:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_1:after*/
#DIV_1:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_1:before*/
#LABEL_2 {
box-sizing: border-box;
color: rgb(51, 51, 51);
display: inline-block;
height: 28px;
max-width: 100%;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
width: 56.25px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 28.125px 14px;
transform-origin: 28.125px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
margin: 0px 0px 5px;
outline: rgb(51, 51, 51) none 0px;
}
/*#LABEL_2*/
#LABEL_2:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
outline: rgb(51, 51, 51) none 0px;
}
/*#LABEL_2:after*/
#LABEL_2:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
outline: rgb(51, 51, 51) none 0px;
}
/*#LABEL_2:before*/
#DIV_3 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 130px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 635px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 317.5px 65px;
transform-origin: 317.5px 65px;
caret-color: rgb(51, 51, 51);
border: 1px solid rgb(204, 204, 204);
border-radius: 5px 5px 5px 5px;
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
overflow: auto scroll;
padding: 0px 0px 0px 10px;
}
/*#DIV_3*/
#DIV_3:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_3:after*/
#DIV_3:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_3:before*/
#DIV_4 {
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 27px;
min-width: 60px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
width: 597px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 298.5px 13.5px;
transform-origin: 298.5px 13.5px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
margin: 14px 10px 2px;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_4*/
#DIV_4:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_4:after*/
#DIV_4:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_4:before*/
#DIV_5 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 28px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 597px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 298.5px 14px;
transform-origin: 298.5px 14px;
caret-color: rgb(51, 51, 51);
border: 1px solid rgb(215, 215, 215);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
margin: 0px 0px 20px;
outline: rgb(51, 51, 51) none 0px;
padding: 14px 15px 0px 5px;
transition: opacity 0.15s linear 0s;
}
/*#DIV_5*/
#DIV_6 {
bottom: 15px;
box-sizing: border-box;
color: rgb(101, 101, 101);
float: right;
height: 27px;
left: 15px;
opacity: 0.9;
position: relative;
right: -15px;
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
top: -15px;
width: 27.7969px;
column-rule-color: rgb(101, 101, 101);
perspective-origin: 13.8906px 13.5px;
transform-origin: 13.8984px 13.5px;
caret-color: rgb(101, 101, 101);
border-top: 0px none rgb(101, 101, 101);
border-right: 0px none rgb(101, 101, 101);
border-bottom: 0px none rgb(101, 101, 101);
border-left: 1px solid rgb(215, 215, 215);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
padding: 0px 6px;
}
/*#DIV_6*/
#DIV_6:after {
box-sizing: border-box;
color: rgb(101, 101, 101);
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
column-rule-color: rgb(101, 101, 101);
caret-color: rgb(101, 101, 101);
border: 0px none rgb(101, 101, 101);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
}
/*#DIV_6:after*/
#DIV_6:before {
box-sizing: border-box;
color: rgb(101, 101, 101);
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
column-rule-color: rgb(101, 101, 101);
caret-color: rgb(101, 101, 101);
border: 0px none rgb(101, 101, 101);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
}
/*#DIV_6:before*/
#SPAN_7 {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#SPAN_7*/
#SPAN_7:after {
word-wrap: box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#SPAN_7:after*/
#SPAN_7:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#SPAN_7:before*/
#DIV_8 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
display: inline-block;
height: 0px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 0px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
margin: -6px 0px 0px;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_8*/
#DIV_8:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_8:after*/
#DIV_8:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_8:before*/
/* Fix */
#DIV_5 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0;
}
#SPAN_7 {
line-height: 28px;
}
<div id="DIV_1">
<label id="LABEL_2">
Invitees
</label>
<div id="DIV_3">
<div id="DIV_4">
<div id="DIV_5">
<div id="DIV_6">
×
</div>
<span id="SPAN_7">A very very long name A very very long name A very very long name <longname@longname.com></span>
<div id="DIV_8">
</div>
</div>
<div id="DIV_5">
<div id="DIV_6">
×
</div>
<span id="SPAN_7">Normal length contact<contact@somname.com></span>
<div id="DIV_8">
</div>
</div>
</div>
</div>
</div>
带省略号的 Flex 框应该可以解决您的问题,
#DIV_5 {
display: flex;
padding-top: 5px;
}
#DIV_6 {
order: 2;
top: -6px;
}
#SPAN_7 {
line-height: normal;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
flex-grow: 1;
}
您可以使用此代码 - text-overflow:ellipsis
body {
margin: 0;
}
#DIV_1 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
float: left;
height: 163px;
left: 0px;
min-height: 1px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 665px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 332.5px 81.5px;
transform-origin: 332.5px 81.5px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
margin: 0px 0px 15px;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 15px;
}
/*#DIV_1*/
#DIV_1:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_1:after*/
#DIV_1:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_1:before*/
#LABEL_2 {
box-sizing: border-box;
color: rgb(51, 51, 51);
display: inline-block;
height: 28px;
max-width: 100%;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
width: 56.25px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 28.125px 14px;
transform-origin: 28.125px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
margin: 0px 0px 5px;
outline: rgb(51, 51, 51) none 0px;
}
/*#LABEL_2*/
#LABEL_2:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
outline: rgb(51, 51, 51) none 0px;
}
/*#LABEL_2:after*/
#LABEL_2:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
outline: rgb(51, 51, 51) none 0px;
}
/*#LABEL_2:before*/
#DIV_3 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 130px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 635px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 317.5px 65px;
transform-origin: 317.5px 65px;
caret-color: rgb(51, 51, 51);
border: 1px solid rgb(204, 204, 204);
border-radius: 5px 5px 5px 5px;
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
overflow: auto scroll;
padding: 0px 0px 0px 10px;
}
/*#DIV_3*/
#DIV_3:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_3:after*/
#DIV_3:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_3:before*/
#DIV_4 {
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 27px;
min-width: 60px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
width: 597px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 298.5px 13.5px;
transform-origin: 298.5px 13.5px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
margin: 14px 10px 2px;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_4*/
#DIV_4:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_4:after*/
#DIV_4:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_4:before*/
#DIV_5 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 28px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 597px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 298.5px 14px;
transform-origin: 298.5px 14px;
caret-color: rgb(51, 51, 51);
border: 1px solid rgb(215, 215, 215);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
margin: 0px 0px 20px;
outline: rgb(51, 51, 51) none 0px;
padding: 14px 15px 0px 5px;
transition: opacity 0.15s linear 0s;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*#DIV_5*/
#DIV_6 {
bottom: 15px;
box-sizing: border-box;
color: rgb(101, 101, 101);
float: right;
height: 27px;
left: 15px;
opacity: 0.9;
position: relative;
right: -15px;
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
top: -15px;
width: 27.7969px;
column-rule-color: rgb(101, 101, 101);
perspective-origin: 13.8906px 13.5px;
transform-origin: 13.8984px 13.5px;
caret-color: rgb(101, 101, 101);
border-top: 0px none rgb(101, 101, 101);
border-right: 0px none rgb(101, 101, 101);
border-bottom: 0px none rgb(101, 101, 101);
border-left: 1px solid rgb(215, 215, 215);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
padding: 0px 6px;
}
/*#DIV_6*/
#DIV_6:after {
box-sizing: border-box;
color: rgb(101, 101, 101);
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
column-rule-color: rgb(101, 101, 101);
caret-color: rgb(101, 101, 101);
border: 0px none rgb(101, 101, 101);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
}
/*#DIV_6:after*/
#DIV_6:before {
box-sizing: border-box;
color: rgb(101, 101, 101);
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
column-rule-color: rgb(101, 101, 101);
caret-color: rgb(101, 101, 101);
border: 0px none rgb(101, 101, 101);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
}
/*#DIV_6:before*/
#SPAN_7 {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#SPAN_7*/
#SPAN_7:after {
word-wrap: box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#SPAN_7:after*/
#SPAN_7:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#SPAN_7:before*/
#DIV_8 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
display: inline-block;
height: 0px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 0px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
margin: -6px 0px 0px;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_8*/
#DIV_8:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_8:after*/
#DIV_8:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_8:before*/
<div id="DIV_1">
<label id="LABEL_2">Invitees</label>
<div id="DIV_3">
<div id="DIV_4">
<div id="DIV_5">
<div id="DIV_6">×</div>
<span id="SPAN_7">A very very long name A very very long name A very very long name <longname@longname.com></span>
<div id="DIV_8"></div>
</div>
<div id="DIV_5">
<div id="DIV_6">×</div>
<span id="SPAN_7">Normal length contact<contact@somname.com></span>
<div id="DIV_8"></div>
</div>
</div>
</div>
</div>
https://jsbin.com/dizixeg/edit?output
我已经使用 SnappySnippet 将 HTML/CSS 快速复制到 jsBin。
我试过了,没有用。最好能为我工作 overflow:ellipses
- 分词:分词;
- 断字:全部断字;
- 白色-space: 前;
- 文本溢出:省略号;
这是我的代码
#DIV_1 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
float: left;
height: 163px;
left: 0px;
min-height: 1px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 665px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 332.5px 81.5px;
transform-origin: 332.5px 81.5px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
margin: 0px 0px 15px;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 15px;
}/*#DIV_1*/
#DIV_1:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_1:after*/
#DIV_1:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_1:before*/
#LABEL_2 {
box-sizing: border-box;
color: rgb(51, 51, 51);
display: inline-block;
height: 28px;
max-width: 100%;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
width: 56.25px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 28.125px 14px;
transform-origin: 28.125px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
margin: 0px 0px 5px;
outline: rgb(51, 51, 51) none 0px;
}/*#LABEL_2*/
#LABEL_2:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
outline: rgb(51, 51, 51) none 0px;
}/*#LABEL_2:after*/
#LABEL_2:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
outline: rgb(51, 51, 51) none 0px;
}/*#LABEL_2:before*/
#DIV_3 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 130px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 635px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 317.5px 65px;
transform-origin: 317.5px 65px;
caret-color: rgb(51, 51, 51);
border: 1px solid rgb(204, 204, 204);
border-radius: 5px 5px 5px 5px;
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
overflow: auto scroll;
padding: 0px 0px 0px 10px;
}/*#DIV_3*/
#DIV_3:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_3:after*/
#DIV_3:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_3:before*/
#DIV_4 {
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 27px;
min-width: 60px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
width: 597px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 298.5px 13.5px;
transform-origin: 298.5px 13.5px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
margin: 14px 10px 2px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_4*/
#DIV_4:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_4:after*/
#DIV_4:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_4:before*/
#DIV_5 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 28px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 597px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 298.5px 14px;
transform-origin: 298.5px 14px;
caret-color: rgb(51, 51, 51);
border: 1px solid rgb(215, 215, 215);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
margin: 0px 0px 20px;
outline: rgb(51, 51, 51) none 0px;
padding: 14px 15px 0px 5px;
transition: opacity 0.15s linear 0s;
}/*#DIV_5*/
#DIV_6 {
bottom: 15px;
box-sizing: border-box;
color: rgb(101, 101, 101);
float: right;
height: 27px;
left: 15px;
opacity: 0.9;
position: relative;
right: -15px;
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
top: -15px;
width: 27.7969px;
column-rule-color: rgb(101, 101, 101);
perspective-origin: 13.8906px 13.5px;
transform-origin: 13.8984px 13.5px;
caret-color: rgb(101, 101, 101);
border-top: 0px none rgb(101, 101, 101);
border-right: 0px none rgb(101, 101, 101);
border-bottom: 0px none rgb(101, 101, 101);
border-left: 1px solid rgb(215, 215, 215);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
padding: 0px 6px;
}/*#DIV_6*/
#DIV_6:after {
box-sizing: border-box;
color: rgb(101, 101, 101);
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
column-rule-color: rgb(101, 101, 101);
caret-color: rgb(101, 101, 101);
border: 0px none rgb(101, 101, 101);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
}/*#DIV_6:after*/
#DIV_6:before {
box-sizing: border-box;
color: rgb(101, 101, 101);
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
column-rule-color: rgb(101, 101, 101);
caret-color: rgb(101, 101, 101);
border: 0px none rgb(101, 101, 101);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
}/*#DIV_6:before*/
#SPAN_7 {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#SPAN_7*/
#SPAN_7:after {
word-wrap:
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#SPAN_7:after*/
#SPAN_7:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#SPAN_7:before*/
#DIV_8 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
display: inline-block;
height: 0px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 0px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
margin: -6px 0px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_8*/
#DIV_8:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_8:after*/
#DIV_8:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_8:before*/
<div id="DIV_1">
<label id="LABEL_2">
Invitees
</label>
<div id="DIV_3">
<div id="DIV_4">
<div id="DIV_5">
<div id="DIV_6">
×
</div>
<span id="SPAN_7">A very very long name A very very long name A very very long name <longname@longname.com></span>
<div id="DIV_8">
</div>
</div>
<div id="DIV_5">
<div id="DIV_6">
×
</div>
<span id="SPAN_7">Normal length contact<contact@somname.com></span>
<div id="DIV_8">
</div>
</div>
</div>
</div>
</div>
这是一个使用 text-overflow:ellipsis
的可能解决方案(新的 CSS 位于代码底部,在 Fix 注释下方)。
作为一般性建议,我会简化代码结构以使其更易于处理。
#DIV_1 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
float: left;
height: 163px;
left: 0px;
min-height: 1px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 665px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 332.5px 81.5px;
transform-origin: 332.5px 81.5px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
margin: 0px 0px 15px;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 15px;
}
/*#DIV_1*/
#DIV_1:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_1:after*/
#DIV_1:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_1:before*/
#LABEL_2 {
box-sizing: border-box;
color: rgb(51, 51, 51);
display: inline-block;
height: 28px;
max-width: 100%;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
width: 56.25px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 28.125px 14px;
transform-origin: 28.125px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
margin: 0px 0px 5px;
outline: rgb(51, 51, 51) none 0px;
}
/*#LABEL_2*/
#LABEL_2:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
outline: rgb(51, 51, 51) none 0px;
}
/*#LABEL_2:after*/
#LABEL_2:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
outline: rgb(51, 51, 51) none 0px;
}
/*#LABEL_2:before*/
#DIV_3 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 130px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 635px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 317.5px 65px;
transform-origin: 317.5px 65px;
caret-color: rgb(51, 51, 51);
border: 1px solid rgb(204, 204, 204);
border-radius: 5px 5px 5px 5px;
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
overflow: auto scroll;
padding: 0px 0px 0px 10px;
}
/*#DIV_3*/
#DIV_3:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_3:after*/
#DIV_3:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_3:before*/
#DIV_4 {
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 27px;
min-width: 60px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
width: 597px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 298.5px 13.5px;
transform-origin: 298.5px 13.5px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
margin: 14px 10px 2px;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_4*/
#DIV_4:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_4:after*/
#DIV_4:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_4:before*/
#DIV_5 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 28px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 597px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 298.5px 14px;
transform-origin: 298.5px 14px;
caret-color: rgb(51, 51, 51);
border: 1px solid rgb(215, 215, 215);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
margin: 0px 0px 20px;
outline: rgb(51, 51, 51) none 0px;
padding: 14px 15px 0px 5px;
transition: opacity 0.15s linear 0s;
}
/*#DIV_5*/
#DIV_6 {
bottom: 15px;
box-sizing: border-box;
color: rgb(101, 101, 101);
float: right;
height: 27px;
left: 15px;
opacity: 0.9;
position: relative;
right: -15px;
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
top: -15px;
width: 27.7969px;
column-rule-color: rgb(101, 101, 101);
perspective-origin: 13.8906px 13.5px;
transform-origin: 13.8984px 13.5px;
caret-color: rgb(101, 101, 101);
border-top: 0px none rgb(101, 101, 101);
border-right: 0px none rgb(101, 101, 101);
border-bottom: 0px none rgb(101, 101, 101);
border-left: 1px solid rgb(215, 215, 215);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
padding: 0px 6px;
}
/*#DIV_6*/
#DIV_6:after {
box-sizing: border-box;
color: rgb(101, 101, 101);
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
column-rule-color: rgb(101, 101, 101);
caret-color: rgb(101, 101, 101);
border: 0px none rgb(101, 101, 101);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
}
/*#DIV_6:after*/
#DIV_6:before {
box-sizing: border-box;
color: rgb(101, 101, 101);
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
column-rule-color: rgb(101, 101, 101);
caret-color: rgb(101, 101, 101);
border: 0px none rgb(101, 101, 101);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
}
/*#DIV_6:before*/
#SPAN_7 {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#SPAN_7*/
#SPAN_7:after {
word-wrap: box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#SPAN_7:after*/
#SPAN_7:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#SPAN_7:before*/
#DIV_8 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
display: inline-block;
height: 0px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 0px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
margin: -6px 0px 0px;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_8*/
#DIV_8:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_8:after*/
#DIV_8:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_8:before*/
/* Fix */
#DIV_5 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0;
}
#SPAN_7 {
line-height: 28px;
}
<div id="DIV_1">
<label id="LABEL_2">
Invitees
</label>
<div id="DIV_3">
<div id="DIV_4">
<div id="DIV_5">
<div id="DIV_6">
×
</div>
<span id="SPAN_7">A very very long name A very very long name A very very long name <longname@longname.com></span>
<div id="DIV_8">
</div>
</div>
<div id="DIV_5">
<div id="DIV_6">
×
</div>
<span id="SPAN_7">Normal length contact<contact@somname.com></span>
<div id="DIV_8">
</div>
</div>
</div>
</div>
</div>
带省略号的 Flex 框应该可以解决您的问题,
#DIV_5 {
display: flex;
padding-top: 5px;
}
#DIV_6 {
order: 2;
top: -6px;
}
#SPAN_7 {
line-height: normal;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
flex-grow: 1;
}
您可以使用此代码 - text-overflow:ellipsis
body {
margin: 0;
}
#DIV_1 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
float: left;
height: 163px;
left: 0px;
min-height: 1px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 665px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 332.5px 81.5px;
transform-origin: 332.5px 81.5px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
margin: 0px 0px 15px;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 15px;
}
/*#DIV_1*/
#DIV_1:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_1:after*/
#DIV_1:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_1:before*/
#LABEL_2 {
box-sizing: border-box;
color: rgb(51, 51, 51);
display: inline-block;
height: 28px;
max-width: 100%;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
width: 56.25px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 28.125px 14px;
transform-origin: 28.125px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
margin: 0px 0px 5px;
outline: rgb(51, 51, 51) none 0px;
}
/*#LABEL_2*/
#LABEL_2:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
outline: rgb(51, 51, 51) none 0px;
}
/*#LABEL_2:after*/
#LABEL_2:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / normal rajdhaniregular;
outline: rgb(51, 51, 51) none 0px;
}
/*#LABEL_2:before*/
#DIV_3 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 130px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 635px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 317.5px 65px;
transform-origin: 317.5px 65px;
caret-color: rgb(51, 51, 51);
border: 1px solid rgb(204, 204, 204);
border-radius: 5px 5px 5px 5px;
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
overflow: auto scroll;
padding: 0px 0px 0px 10px;
}
/*#DIV_3*/
#DIV_3:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_3:after*/
#DIV_3:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_3:before*/
#DIV_4 {
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 27px;
min-width: 60px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
width: 597px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 298.5px 13.5px;
transform-origin: 298.5px 13.5px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
margin: 14px 10px 2px;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_4*/
#DIV_4:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_4:after*/
#DIV_4:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 14px / 20px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_4:before*/
#DIV_5 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 28px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 597px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 298.5px 14px;
transform-origin: 298.5px 14px;
caret-color: rgb(51, 51, 51);
border: 1px solid rgb(215, 215, 215);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
margin: 0px 0px 20px;
outline: rgb(51, 51, 51) none 0px;
padding: 14px 15px 0px 5px;
transition: opacity 0.15s linear 0s;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*#DIV_5*/
#DIV_6 {
bottom: 15px;
box-sizing: border-box;
color: rgb(101, 101, 101);
float: right;
height: 27px;
left: 15px;
opacity: 0.9;
position: relative;
right: -15px;
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
top: -15px;
width: 27.7969px;
column-rule-color: rgb(101, 101, 101);
perspective-origin: 13.8906px 13.5px;
transform-origin: 13.8984px 13.5px;
caret-color: rgb(101, 101, 101);
border-top: 0px none rgb(101, 101, 101);
border-right: 0px none rgb(101, 101, 101);
border-bottom: 0px none rgb(101, 101, 101);
border-left: 1px solid rgb(215, 215, 215);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
padding: 0px 6px;
}
/*#DIV_6*/
#DIV_6:after {
box-sizing: border-box;
color: rgb(101, 101, 101);
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
column-rule-color: rgb(101, 101, 101);
caret-color: rgb(101, 101, 101);
border: 0px none rgb(101, 101, 101);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
}
/*#DIV_6:after*/
#DIV_6:before {
box-sizing: border-box;
color: rgb(101, 101, 101);
text-decoration: none solid rgb(101, 101, 101);
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
text-size-adjust: 100%;
column-rule-color: rgb(101, 101, 101);
caret-color: rgb(101, 101, 101);
border: 0px none rgb(101, 101, 101);
font: normal normal 400 normal 30px / 32px rajdhaniregular;
outline: rgb(101, 101, 101) none 0px;
}
/*#DIV_6:before*/
#SPAN_7 {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#SPAN_7*/
#SPAN_7:after {
word-wrap: box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#SPAN_7:after*/
#SPAN_7:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#SPAN_7:before*/
#DIV_8 {
bottom: 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
display: inline-block;
height: 0px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
top: 0px;
width: 0px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
margin: -6px 0px 0px;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_8*/
#DIV_8:after {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_8:after*/
#DIV_8:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
column-rule-color: rgb(51, 51, 51);
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 0px rajdhanimedium;
outline: rgb(51, 51, 51) none 0px;
}
/*#DIV_8:before*/
<div id="DIV_1">
<label id="LABEL_2">Invitees</label>
<div id="DIV_3">
<div id="DIV_4">
<div id="DIV_5">
<div id="DIV_6">×</div>
<span id="SPAN_7">A very very long name A very very long name A very very long name <longname@longname.com></span>
<div id="DIV_8"></div>
</div>
<div id="DIV_5">
<div id="DIV_6">×</div>
<span id="SPAN_7">Normal length contact<contact@somname.com></span>
<div id="DIV_8"></div>
</div>
</div>
</div>
</div>