我正在為學(xué)校制作響應(yīng)網(wǎng)站，我的問題是:

我如何在我的網(wǎng)站上設(shè)置句子的最大字符長度(比如75個字符)，當(dāng)我有一個非常大的屏幕時，句子不會超過75個字符。

我已經(jīng)嘗試了最大寬度，但這打亂了我的布局。我正在使用flexbox和媒體查詢來使其響應(yīng)迅速。

您可以通過設(shè)置最大寬度和溢出省略號來使用截斷方法，如下所示

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

一個例子:

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

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

有一個CSS“長度值”為ch。

來自MDN

這個單位表示寬度，或者更準確地說是前進的度量， 元素的中的標志符號“0”(零，Unicode字符U+0030) 字體。

這可能接近你所追求的。

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

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

嘗試在設(shè)置為最大寬度后截斷字符。在這種情況下，我使用了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>

示例代碼:

.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，您可以設(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;

所以對我來說，它是在一個擴展中使用，所以它是完美的，更多信息在這里:https://medium . com/mofed/CSS-line-clamp-the-good-the-bad-and-the-straight-up-break-865413 f16e 5

這在CSS中是不可能的，你必須使用Javascript來實現(xiàn)。雖然你可以將p的寬度設(shè)置為30個字符，并且后面的字母會自動向下，但是這并不準確，并且如果字符是大寫的話會有所不同。

超文本標記語言

<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)*$/, '...');
  });
}

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

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

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

結(jié)果

這是一個痛苦的故事。前乳酸鏈球菌肽 利古拉，大部分人坐在椅子上，馬蒂斯等...

Jsfiddle

在CodePen上查看完整的工作代碼。給定以下HTML:

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

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

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

p {
  grid-column: 2 / 3;
}

這是它看起來的樣子(一個完全工作的例子的簽出代碼筆):

這是另一個例子，你可以用minmax來設(shè)置一個數(shù)值范圍。在小屏幕上，寬度將被設(shè)置為50個字符寬，而在大屏幕上，寬度將為70個字符寬。

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

p {
  grid-column: 2 / 3;
}

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

我有一個類似的問題，并發(fā)現(xiàn)這個優(yōu)秀的css從Hackingui.com唯一的解決方案。你可以閱讀這篇文章的信息，但下面是主要代碼。

我測試過了，效果很好。希望有人在選擇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;
}

這篇文章是關(guān)于一個CSS解決方案的，但是這篇文章已經(jīng)很老了，所以為了防止其他人偶然發(fā)現(xiàn)這個問題，并且正在使用一個現(xiàn)代的JS框架，比如Angular 4+，有一個簡單的方法可以通過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

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

完全支持所有瀏覽器。

用兩種不同的方法嘗試我的解決方案。

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

你可以隨時查看你的字體有多寬，然后取平均字符像素大小。然后把它乘以你想要的字符數(shù)。這有點俗氣，但它是一個快速解決辦法。

75個字符

我已經(jīng)嘗試了最大寬度，但這打亂了我的布局。

使用最大寬度:75ch，然后創(chuàng)建一個布局，當(dāng)你超過這個寬度時不會混亂。

這段代碼有效:

.on_table{
    table-layout: fixed;
}

.on_tr_td{
    border:1px solid grey;
    max-width: 20ch;
    color: green;
    word-break:break-all
}