12 个答案:

答案 0 :(得分：199)

你总是可以通过设置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)

尝试将其设置为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网页。

答案 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中，您可以设置显示为“ -webkit-line-clamp”的行数：

display: -webkit-box;

-webkit-box-orient: vertical;

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

overflow: hidden;

答案 5 :(得分：2)

此文章是针对CSS解决方案的，但是该文章已经很老了，以防万一其他人偶然发现了这个问题并使用了Angular 4+等现代JS框架，有一种简单的方法可以通过Angular Pipes不必弄乱CSS。

也可能有“反应”或“ Vue”方法。这只是为了展示如何在框架内完成。

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 强>

的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无法实现，您必须使用Javascript。虽然你可以将p的宽度设置为多达30个字符，但是下一个字母会自动降低，但这又不会准确，如果字符是大写字母则会有所不同。

答案 8 :(得分：0)

您始终可以查看字体的宽度并获取平均字符像素大小。然后，将其乘以所需的字符数即可。有点俗气，但可以快速解决。

答案 9 :(得分：0)

以两种不同的方式尝试我的解决方案。

.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找到了这个优秀的css解决方案。您可以阅读该文章以获取信息，但下面是主要代码。

我对它进行了测试，效果很好。希望有人在选择JS或服务器端选项之前发现它很有用

/* 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)

现代CSS网格答案

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

您可以使用CSS Grid创建三列，并告诉容器在包含我们段落的中间列中采用70个字符的最大宽度。

.container

{

display: grid;

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

}

p {

grid-column: 2 / 3;

}

这是它的样子(检出CodePen为完整示例)：

这是另一个示例，您可以在其中使用minmax来设置值的范围。在小屏幕上，宽度设置为50个字符，在大屏幕上，宽度设置为70个字符。

.container

{

display: grid;

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

}

p {

grid-column: 2 / 3;

}