Html 在 CSS 中设置最大字符长度

Setting a max character length in CSS

提问by Sharif1111

I am making responsive website for school and my question is:

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

How do I set a max character length of the sentences (with CSS) on my website (like 75 characters) that when I have a very large screen, the sentences wont go further than 75 characters.

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

I have tried a max width but that messes up my layout. I am using flexbox and media queries to make it responsive.

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

回答by Vangel Tzo

You could always use a truncate method by setting a max-widthand overflow ellipsislike this

你总是可以通过像这样设置 amax-width和溢出来使用截断方法ellipsis

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

An example: http://jsfiddle.net/3czeyznf/

一个例子：http: //jsfiddle.net/3czeyznf/

For a multi line truncation have a look at a flexsolution. An example with truncation on 3 rows.

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

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

An example: https://codepen.io/srekoble/pen/EgmyxV

一个例子：https: //codepen.io/srekoble/pen/EgmyxV

回答by Paulie_D

There is a CSS 'length value' of ch.

有一个 CSS '长度值' ch。

From MDN

来自 MDN

This unit represents the width, or more precisely the advance measure, of the glyph '0' (zero, the Unicode character U+0030) in the element's font.

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

This may approximate what you are after.

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

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>

回答by V K Singh

Try this for truncating characters after setting it to max-width. I have used 75ch in this case

将其设置为最大宽度后，尝试使用此方法截断字符。在这种情况下我使用了 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>

For multiline truncating, please follow the link.

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

An example: https://codepen.io/srekoble/pen/EgmyxV

一个例子：https: //codepen.io/srekoble/pen/EgmyxV

We will be using webkit css for this. In short WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome. This may be brower specific as every browser is backed by a rendering engine to draw the HTML/CSS web page.

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

回答by Hossein Jafari

example code:

示例代码：

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

    

回答by Khado Mikhal

With Chrome you can set the number of lines displayed with "-webkit-line-clamp" :

使用 Chrome，您可以设置使用“ -webkit-line-clamp”显示的行数：

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

So for me it is to use in an extension so it is perfect, more information here: https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5

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

回答by Jean-Luc

That's not possible with CSS, you will have to use the Javascript for that. Although you can set the width of the p to as much as 30 characters and next letters will automatically come down but again this won't be that accurate and will vary if the characters are in capital.

这在 CSS 中是不可能的，您必须为此使用 Javascript。尽管您可以将 p 的宽度设置为多达 30 个字符，并且下一个字母会自动降低，但这同样不会那么准确，并且如果字符为大写，则会有所不同。

回答by imtaher

HTML

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

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

CSS

#dash {
  width: 400px;
  height: 60px;
  overflow: hidden;
}

#dash p {
  padding: 10px;
  margin: 0;
}

RESULT

结果

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

Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英。Proin nisi ligula, dapibus a volutpat sat amet, mattis et...

Jsfiddle

提琴手

回答by Benny Thadikaran

Pure CSS solution to truncating multi line characters

截断多行字符的纯 CSS 解决方案

I had a similar problem and found this excellent css only solution from Hackingui.com. You can read the article for information but below is the main code.

我有一个类似的问题，并从Hackingui.com找到了这个优秀的 css only 解决方案。您可以阅读文章以获取信息，但以下是主要代码。

I tested it and it works perfectly. Hopefully someone finds it useful before opting for JS or server side options

我测试了它，它完美地工作。希望有人在选择 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;
}

回答by Muhammad Rehan Saeed

Modern CSS Grid Answer

现代 CSS 网格答案

View the fully working code on CodePen. Given the following HTML:

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

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

You can use CSS Grid to create three columns and tell the container to take a maximum width of 70 characters for the middle column which contains our paragraph.

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

.container
{
  display: grid;
  grid-template-columns: 1fr, 70ch 1fr;
}

p {
  grid-column: 2 / 3;
}

This is what it looks like (Checkout CodePenfor a fully working example):

这是它的样子（查看CodePen以获得完整的工作示例）：

Here is another example where you can use minmax to set a range of values. On small screens the width will be set to 50 characters wide and on large screens it will be 70 characters wide.

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

.container
{
  display: grid;
  grid-template-columns: 1fr minmax(50ch, 70ch) 1fr;
}

p {
  grid-column: 2 / 3;
}

回答by Super Model

Try my solution with 2 different ways.

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