CSS에서 텍스트의 마지막 줄을 중앙 정렬하는 방법은 무엇입니까?

CSS에서 텍스트의 마지막 줄을 중앙 정렬하는 방법은 무엇입니까?

---

텍스트를 중앙 정렬하려면 어떻게합니까?

현재 양쪽 맞춤은 마지막 줄의 중앙에 있지 않습니다.

---

당신은 text-align-last속성을 사용할 수 있습니다

.center-justified {
    text-align: justify;
    text-align-last: center;
}

다음은 호환성 테이블입니다. https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last#Browser_compatibility .

Internet Explorer를 포함한 Safari (Mac 및 iOS 모두)를 제외한 모든 브라우저에서 작동 합니다.

또한 Internet Explorer에서 만 작동합니다 text-align: justify(다른 값 text-align) 및 start및 end지원되지 않습니다.

---

가운데 정렬되고 양쪽 정렬 된 텍스트를 찾는 사람들에게는 다음이 작동합니다.

<div class="center-justified">...lots and lots of text...</div>

다음 CSS 규칙 사용 ( width필요에 따라 속성 조정 ) :

.center-justified {
  text-align: justify;
  margin: 0 auto;
  width: 30em;
}

여기에 라이브 데모가 있습니다.

무슨 일이야?

1. text-align: justify;텍스트가 포함 된 텍스트의 전체 너비를 채우는 지 확인합니다 div.
2. margin: 0 auto; 실제로 네 가지 규칙의 속기입니다.
   • 첫 번째 값은 margin-top및 margin-bottom규칙에 사용됩니다. 따라서 전체는 즉 margin-top: 0; margin-bottom: 0, 위 또는 아래 여백이 없음을 의미 합니다 div.
   • 두 번째 값은 margin-left및 margin-right규칙에 사용됩니다. 따라서이 규칙은 margin-left: auto; margin-right: auto. 이것은 영리한 부분입니다. 브라우저가 측면에서 사용 가능한 공간을 차지하고 왼쪽과 오른쪽에 균등하게 분배하도록 지시합니다. 결과는 중앙 텍스트입니다.
     그러나 이것은
3. width: 30em;의 너비를 제한하는 div. 너비가 제한된 경우에만 margin: auto배포 를 위해 약간의 공백이 남습니다 . 이 규칙이 없으면 div은 사용 가능한 모든 수평 공간을 차지하게되며 센터링 효과를 잃게됩니다.

---

이 코드로 작업

text-align: justify; text-align-last: center;

---

방법이없는 것 같습니다. 양쪽 맞춤을 사용한 다음 범위에서 텍스트의 마지막 줄을 감싸고 텍스트 정렬 중앙으로 설정하여 가짜로 만들 수 있습니다. 작은 텍스트 블록에서는 잘 작동하지만 많은 양의 텍스트 나 동적 텍스트에는 유용한 접근 방식이 아닙니다.

저는 Adobe에서 W3C 작업에 참여하는 사람을 찾고 다음 회의에서 오른쪽 / 왼쪽 / 가운데 정당성을 제시하도록 잔소리를하는 것이 좋습니다. CSS의 기본 타이포그래피 기능을 추진할 수있는 사람은 Adobe 일 것입니다.

---

<div class="centered">
<p style="text-align: justify;">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque</p>nisl consectetur et.</div>

콘텐츠를 div 태그로 래핑하고 text-align : center 속성을 적용하여 결과를 얻을 수있었습니다. div 태그 바로 다음에 내용을 단락 태그로 감싸고 속성 인 text-align : justify를 적용했습니다. 마지막 줄을 가운데에 맞추기 위해 단락 태그에서 제외하고 div 태그에 적용된 속성으로 돌아갑니다. 마지막 줄에서 원하는 단어 수에 대해 전략적으로 작성하면됩니다. 바이올린의 데모를 포함했습니다. 도움이 되었기를 바랍니다.

데모-단락 텍스트 가운데 맞춤

---

텍스트 줄의 길이를 계산하고 텍스트 줄과 같은 크기의 블록을 만듭니다. 블록을 중앙에 배치하십시오. 두 줄이있는 경우 길이가 다른 경우 두 개의 블록이 필요합니다. 블록에서 추가 공백을 원하지 않는 경우 span 태그와 br 태그를 사용할 수 있습니다. pre 태그를 사용하여 블록 내부의 형식을 지정할 수도 있습니다.

그리고 이렇게 할 수 있습니다 : style = 'text-align : center;'

수직 참조 : http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

블록 및 웹 페이지 레이아웃을위한 가장 좋은 방법은 여기로 이동하여 2009 년에 시작된 새로운 표준 flex에 대해 알아보십시오. http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/# 콘텐츠 속성을 정당화

또한 w3schools에는 많은 플렉스 예제가 있습니다.

---

고정 된 너비의 비 동적 텍스트에 대한 솔루션 (최선은 아니지만 일부 경우에는 여전히 작동 함). 텍스트를 두 번째 줄의 끝까지 "확장"할 공간이 약간있는 상황에 유용합니다. 단락 끝에 기호를 만들고 (길이 실험) 숨 깁니다. 단락 절대 위치에 적용하거나 여백 / 여백으로 여유 공간을 수정하십시오.

중앙 정렬 텍스트를위한 우수한 호환성 / 크로스 브라우저 방식.

예 (앞 단락) :

.paragraph {
    width:455px;
    text-align:justify;
}

.center{
  display:block;
  text-align:center;
  margin-top:-17px;
}

<div class="paragraph">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna,<br><center>vel scelerisque nisl consectetur et.</center></div>

그리고 수정 후 :

.paragraph {
    width:455px;
    text-align:justify;
    position:relative;
}
.center{
  display:block;
  text-align:center;
  margin-top:-17px;
}
.paragraph b{
  opacity:0;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
}

<div class="paragraph">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <b>__</b><br><div class="center">vel scelerisque nisl consectetur et.</div></div>

---

단순한. 텍스트 정렬 : 양쪽 맞춤; (요소를 정렬하려면) Padding-left :? px; (요소를 중앙에 배치)

---

여기에있는 대부분의 솔루션은 반응 형 텍스트 상자를 고려하지 않습니다.

단락의 마지막 줄에있는 텍스트의 양은 뷰어 브라우저의 크기에 따라 결정되므로 매우 어려워집니다.

간단히 말해서, 어떤 종류의 브라우저 / 모바일 응답 성을 원한다면 이것은 불가능하다고 생각합니다.

참고 URL : https://stackoverflow.com/questions/4704896/how-to-center-justify-the-last-line-of-text-in-css