12 個答案:

答案 0 :(得分：199)

你總是可以通過設(shè)置max-width和溢出ellipsis來使用截斷方法

p {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

max-width: 200px;

}

對于多行截斷，請查看flex解決方案。

截斷3行的示例。

p {

overflow: hidden;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

}

答案 1 :(得分：84)

有一個CSS＆＃39;長度值＆＃39; ch。

來自MDN

此單位表示寬度，或更準確地說是提前量度，

字形＆＃39; 0＆＃39;元素中的(零，Unicode字符U + 0030)

字體。

這可能與你所追求的相近。

＆＃13;

＆＃13;

p {

overflow: hidden;

max-width: 75ch;

}＆＃13;

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur

adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.

＆＃13;＆＃13;＆＃13;

答案 2 :(得分：31)

嘗試將其設(shè)置為max-width后截斷字符。我在這種情況下使用了75ch

p {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

max-width: 75ch;

}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc.

對于多行截斷，請點擊鏈接。

我們將使用webkit css。簡而言之，WebKit是Safari / Chrome的HTML / CSS Web瀏覽器渲染引擎。這可能是特定的，因為每個瀏覽器都由渲染引擎支持以繪制HTML / CSS網(wǎng)頁。

答案 3 :(得分：11)

示例代碼：

.limited-text{

white-space: nowrap;

width: 400px;

overflow: hidden;

text-overflow: ellipsis;

}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.

答案 4 :(得分：4)

在Chrome中，您可以設(shè)置顯示為“ -webkit-line-clamp”的行數(shù)：

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3; /* Number of lines displayed before it truncate */

overflow: hidden;

答案 5 :(得分：2)

此文章是針對CSS解決方案的，但是該文章已經(jīng)很老了，以防萬一其他人偶然發(fā)現(xiàn)了這個問題并使用了Angular 4+等現(xiàn)代JS框架，有一種簡單的方法可以通過Angular Pipes不必弄亂CSS。

也可能有“反應(yīng)”或“ Vue”方法。這只是為了展示如何在框架內(nèi)完成。

truncate-text.pipe.ts

/**

* Helper to truncate text using JS in view only.

*

* This is pretty difficult to do reliably with CSS, especially when there are

* multiple lines.

*

* Example: {{ value | truncateText:maxLength }} or {{ value | truncateText:45 }}

*

* If maxLength is not provided, the value will be returned without any truncating. If the

* text is shorter than the maxLength, the text will be returned untouched. If the text is greater

* than the maxLength, the text will be returned with 3 characters less than the max length plus

* some ellipsis at the end to indicate truncation.

*

* For example: some really long text I won't bother writing it all ha...

*/

@Pipe({ name: 'truncateText' })

export class TruncateTextPipe implements PipeTransform {

transform(value: string, ...args: any[]): any {

const maxLength = args[0]

const maxLengthNotProvided = !maxLength

const isShorterThanMaximumLength = value.length < maxLength

if (maxLengthNotProvided || isShorterThanMaximumLength) {

return value

}

const shortenedString = value.substr(0, maxLength - 3)

return `${shortenedString}...`

}

}

app.component.html

{{ application.name | truncateText:45 }}

答案 6 :(得分：1)

HTML 強>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a urna ac

quam.

的jQuery 強>

var p = $('#dash p');

var ks = $('#dash').height();

while ($(p).outerHeight() > ks) {

$(p).text(function(index, text) {

return text.replace(/\W*\s(\S)*$/, '...');

});

}

CSS 強>

#dash {

width: 400px;

height: 60px;

overflow: hidden;

}

#dash p {

padding: 10px;

margin: 0;

}

RESULT 強>

Lorem ipsum dolor坐下來，精神上的精神。 Proin nisi

ligula，dapibus a volutpat sit amet，mattis et ...

答案 7 :(得分：1)

CSS無法實現(xiàn)，您必須使用Javascript。雖然你可以將p的寬度設(shè)置為多達30個字符，但是下一個字母會自動降低，但這又不會準確，如果字符是大寫字母則會有所不同。

答案 8 :(得分：0)

您始終可以查看字體的寬度并獲取平均字符像素大小。然后，將其乘以所需的字符數(shù)即可。有點俗氣，但可以快速解決。

答案 9 :(得分：0)

以兩種不同的方式嘗試我的解決方案。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.

.wrapper {

padding: 20px;

background: #eaeaea;

max-width: 400px;

margin: 50px auto;

}

.demo-1 {

overflow: hidden;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

}

.demo-2 {

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

max-width: 150px;

}

答案 10 :(得分：0)

用于截斷多行字符的純CSS解決方案

我遇到了類似的問題，并從Hackingui.com找到了這個優(yōu)秀的css解決方案。您可以閱讀該文章以獲取信息，但下面是主要代碼。

我對它進行了測試，效果很好。希望有人在選擇JS或服務(wù)器端選項之前發(fā)現(xiàn)它很有用

/* styles for '...' */

.block-with-text {

/* hide text if it more than N lines */

overflow: hidden;

/* for set '...' in absolute position */

position: relative;

/* use this value to count block height */

line-height: 1.2em;

/* max-height = line-height (1.2) * lines max number (3) */

max-height: 3.6em;

/* fix problem when last visible word doesn't adjoin right side */

text-align: justify;

/* place for '...' */

margin-right: -1em;

padding-right: 1em;

}

/* create the ... */

.block-with-text:before {

/* points in the end */

content: '...';

/* absolute position */

position: absolute;

/* set position to right bottom corner of block */

right: 0;

bottom: 0;

}

/* hide ... if we have text, which is less than or equal to max lines */

.block-with-text:after {

/* points in the end */

content: '';

/* absolute position */

position: absolute;

/* set position to right bottom corner of text */

right: 0;

/* set width and height */

width: 1em;

height: 1em;

margin-top: 0.2em;

/* bg color = bg color under block */

background: white;

}

答案 11 :(得分：0)

現(xiàn)代CSS網(wǎng)格答案

在CodePen上查看完整的工作代碼。鑒于以下HTML：

Several paragraphs of text...

您可以使用CSS Grid創(chuàng)建三列，并告訴容器在包含我們段落的中間列中采用70個字符的最大寬度。

.container

{

display: grid;

grid-template-columns: 1fr, 70ch 1fr;

}

p {

grid-column: 2 / 3;

}

這是它的樣子(檢出CodePen為完整示例)：

這是另一個示例，您可以在其中使用minmax來設(shè)置值的范圍。在小屏幕上，寬度設(shè)置為50個字符，在大屏幕上，寬度設(shè)置為70個字符。

.container

{

display: grid;

grid-template-columns: 1fr minmax(50ch, 70ch) 1fr;

}

p {

grid-column: 2 / 3;

}

總結(jié)

以上是生活随笔為你收集整理的css设置字符长度,在css中设置最大字符长度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。