CSS에서 최대 문자 길이 설정

CSS에서 최대 문자 길이 설정

---

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

내 웹 사이트에서 최대 75 자의 문장 (CSS 포함)을 75 자와 같은 최대 문자 길이로 설정하면 화면이 큰 경우 문장이 75 자 이상으로 이동하지 않습니다.

최대 너비를 시도했지만 레이아웃이 엉망입니다. flexbox와 mediaqueries를 사용하여 반응 형으로 만듭니다.

---

다음 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로는 불가능합니다. 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는 amet, conditetur adipiscing elit에 앉습니다. Proin nisi ligula, dapibus a volutpat sit amet, mattis 등 ...

JS 피들

---

여러 줄 문자를 자르는 순수한 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.

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

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

---

Try my solution with 2 different ways.

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

---

Modern CSS Grid Answer

View the fully working code on CodePen. Given the following 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.

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

p {
  grid-column: 2 / 3;
}

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

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.

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

p {
  grid-column: 2 / 3;
}

참고URL : https://stackoverflow.com/questions/26973570/setting-a-max-character-length-in-css