word break與文本溢出

我有一個固定寬度和文本里面的容器。我希望文字能夠word-break: break-word放到第二行，然後如果文字太長，則將text-overflow: ellipsis添加到第二行。這有可能實現嗎？word break與文本溢出

例如，badgerbadgerbadgerbadgerbadger將被分成兩行，第二行（因爲它仍然太長）將在末尾有省略號。

const container = { 
    maxWidth: '140px', 
} 

const textStyle = { 
    display: 'block', 
    overflow: 'hidden', 
    whiteSpace: 'nowrap', 
    maxWidth: '140px', 
    textOverflow: 'ellipsis', 
    wordBreak: 'break-word', //doesn't work 
} 

render() { 
    return (
     <div style={container}> 
      <p style={textStyle}>badgerbadgerbadgerbadgerbadger</p> 
     </div> 
    ) 
}

來源

2017-07-12 patrickhuang94

你可以做到這一點，但不像一個文本行那麼容易。

有幾種方法可以做到這一點。

檢查出來：

Pure CSS multiline text with ellipsis

-webkit-line-clamp: xx(lines to show);

和

Line Clampin’ (Truncating Multiple Line Text)

來源

2017-07-12 23:49:51

可以幫助dotdotdot()功能：

閱讀更多：http://dotdotdot.frebsite.nl/

Demo

來源

2017-07-13 03:17:23 Ehsan

通過pseudoelements跨瀏覽器的解決方案。需要text-align: justify;並作爲母公司的背景pseudoelement設置相同background-color：

/* styles for ellipsis '…' */ 
 
.block-with-text { 
 
    /* hide text when we have more than N lines */ 
 
    overflow: hidden; 
 
    /* for setting absolutely positioned ellisis '…' */ 
 
    position: relative; 
 
    line-height: 1.2em; 
 
    /* max-height = line-height × line number, 1.2 × 3 = 3.6 */ 
 
    max-height: 3.6em; 
 
    text-align: justify; 
 
    /* place for ellipsis '…' */ 
 
    padding-right: 1em; 
 
} 
 

 
/* creating ellipsis … */ 
 
.block-with-text:before { 
 
    content: "…"; 
 
    position: absolute; 
 
    /* ellipsis move to right bottom corner */ 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
/* hide ellipsis if we have text not more that maximum line numbers */ 
 
.block-with-text:after { 
 
    content: ""; 
 
    position: absolute; 
 
    /* move to the right bottom corner */ 
 
    right: 0; 
 
    /* setting width и height */ 
 
    width: 1em; 
 
    height: 1em; 
 
    margin-top: 0.2em; 
 
    /* hide ellipsis using white background */ 
 
    background: white; 
 
}

<div class="block-with-text"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div>

來源

2017-07-13 03:32:22

對於WebKit的瀏覽器，你可以使用這個CSS：

.block-with-text { 
 
    border: 1px solid #000; 
 
    padding: 5px; 
 
    display: block; 
 
    display: -webkit-box; 
 
    max-width: 400px; 
 
    -webkit-line-clamp: 4; /* max line number */ 
 
    -webkit-box-orient: vertical; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="block-with-text"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div>

來源

2017-07-13 03:37:34

word break與文本溢出

回答

相關問題