학교에 반응 형 웹 사이트를 만들고 있는데 제 질문은 :

매우 큰 화면이 표시 될 때 문장이 75자를 넘지 않도록 웹 사이트에서 문장의 최대 문자 길이 (CSS 사용)를 75 자처럼 설정하는 방법은 무엇입니까?

최대 너비를 시도했지만 레이아웃이 엉망입니다. Flexbox 및 미디어 쿼리를 사용하여 반응 형으로 만듭니다.

다음 max-width과 ellipsis같이 a 및 overflow 를 설정하여 항상 잘림 방법을 사용할 수 있습니다

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'(0, 유니 코드 문자 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

이를 위해 웹킷 CSS를 사용할 것입니다. 간단히 말해서 WebKit은 Safari / Chrome 용 HTML / CSS 웹 브라우저 렌더링 엔진입니다. 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로는 불가능합니다. 자바 스크립트를 사용해야합니다. 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는 amet, conditetur adipiscing elit에 앉아 있습니다. Proin nisi ligula, dapibus a volutpat sit amet, mattis 등 ...

JS 피들

여러 줄 문자를 자르는 순수한 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를 사용하여 3 개의 열을 만들고 컨테이너에 단락이 포함 된 가운데 열의 최대 너비를 70 자로 지정할 수 있습니다.

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

p {
  grid-column: 2 / 3;
}

이것은 다음과 같습니다 ( 완전히 작동하는 예제는 Checkout CodePen ).

다음은 minmax를 사용하여 값 범위를 설정할 수있는 또 다른 예입니다. 작은 화면에서는 너비가 50 자로 설정되고 큰 화면에서는 너비가 70 자로 설정됩니다.

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

p {
  grid-column: 2 / 3;
}

이 게시물은 CSS 솔루션에 대한 것이지만 게시물은 꽤 오래되었으므로 다른 사람들 이이 문제를 발견하고 Angular 4 +와 같은 최신 JS 프레임 워크를 사용하는 경우 Angular Pipes를 통해이 작업을 수행하지 않고도 간단한 방법이 있습니다. CSS로 혼란스러워합니다.

이 작업을 수행하는 "React"또는 "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>

두 가지 방법으로 내 솔루션을 사용해보십시오.

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