现代CSS网格答案

Question

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

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

我尝试了最大宽度，但这会弄乱我的布局。我正在使用flexbox和mediaqueries来使其响应。

Answer 1

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

Answer 2

有一个CSS＆＃39;长度值＆＃39; ch。

来自MDN

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

这可能与你所追求的相近。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

尝试将其设置为max-width后截断字符。我在这种情况下使用了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网页。

Answer 4

示例代码：

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

Answer 5

在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

Answer 6

此文章是针对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

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

Answer 7

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

Answer 8

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

<强> RESULT

Lorem ipsum dolor坐下来，精神上的精神。 Proin nisi ligula，dapibus a volutpat sit amet，mattis et ...

Jsfiddle

Answer 9

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

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

Answer 10

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

Answer 11

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

Answer 12

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

在css中设置最大字符长度

12 个答案:

现代CSS网格答案