我正在为学校制作响应式网站，我的问题是：

如何在我的网站上设置句子的最大字符长度（使用CSS）（例如75个字符），当我的屏幕很大时，句子的长度不能超过75个字符。

我已经尝试过最大宽度，但这弄乱了我的布局。我正在使用flexbox和媒体查询来使其响应。

您总是可以通过设置a max-width和ellipsis类似这样的溢出来使用截断方法

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

范例：http：//jsfiddle.net/3czeyznf/

对于多行截断，请查看flex解决方案。截断3行的示例。

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

例如：https：//codepen.io/srekoble/pen/EgmyxV

CSS的“长度值”为ch。

从MDN

该单位表示元素字体中字形“ 0”（零，Unicode字符U + 0030）的宽度，或更准确地说是提前量度。

这可能近似于您所追求的。

p {
  overflow: hidden;
  max-width: 75ch;
}

<p>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.</p>

将其设置为最大宽度后，尝试将其截断。我在这种情况下用了75ch

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75ch;
}

<p>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.</p>

对于多行截断，请点击链接。

例如：https：//codepen.io/srekoble/pen/EgmyxV

我们将为此使用webkit css。简而言之，WebKit是Safari / Chrome的HTML / CSS Web浏览器呈现引擎。这可能是特定于浏览器的，因为每个浏览器都由渲染引擎支持以绘制HTML / CSS网页。

示例代码：

.limited-text{
    white-space: nowrap;
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
}

<p class="limited-text">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.</p>

    

在Chrome中，您可以设置显示为“ -webkit-line-clamp ” 的行数：

     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;  /* Number of lines displayed before it truncate */
     overflow: hidden;

所以对我来说，它是在扩展程序中使用的，因此它是完美的，请在此处获取更多信息：https : //medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up -broken-865413f16e5

CSS无法做到这一点，您将不得不使用Javascript。尽管您可以将p的宽度设置为最多30个字符，并且下一个字母会自动下降，但是这又不太准确，并且如果这些字符以大写形式显示，则会有所不同。

的HTML

<div id="dash">
<p>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.</p>
</div>

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;
}

结果

Lorem ipsum dolor坐下，一直保持良好状态。Proin nisi ligula，dapibus avolutpat，amet，mattis等...

Jsfiddle

截断多行字符的纯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;
}

现代CSS网格答案

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

<div class="container">
    <p>Several paragraphs of text...</p>
</div>

您可以使用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;
}

这篇文章是针对CSS解决方案的，但是这篇文章已经很老了，以防万一其他人迷失了方向，并使用了现代JS框架（例如Angular 4+），有一种简单的方法可以通过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

<h1>{{ application.name | truncateText:45 }}</h1>

用2种不同的方法尝试我的解决方案。

<div class="wrapper">
      <p class="demo-1">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.</p>
</div>

<div class="wrapper">
  <p class="demo-2">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.</p>
</div>

.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;
}