오버플로 텍스트를 중앙에 배치 할 수 있습니까?

오버플로 텍스트를 중앙에 배치 할 수 있습니까?

---

text-align:center너비가 텍스트 너비보다 큰 요소를 지정 하면 텍스트가 예상대로 요소의 콘텐츠 상자 중앙에 배치됩니다.

text-align:center너비가 텍스트 너비보다 작은 요소를 지정 하면 텍스트가 콘텐츠 상자의 왼쪽 가장자리에 정렬되고 콘텐츠 상자의 오른쪽 가장자리가 넘칩니다.

여기 에서 두 가지 사례를 확인할 수 있습니다 .

CSS 마법이 텍스트가 콘텐츠 상자의 왼쪽 가장자리와 오른쪽 가장자리 모두를 똑같이 넘치도록 만들어 중앙에 유지되도록 할 수 있습니까?

---

나는이 질문이 오래되었다는 것을 알고 있지만 동일한 문제가 있었고 스팬만으로 훨씬 더 쉬운 해결책을 찾았습니다. http://jsfiddle.net/7hy3w2jj/

<div>some text</div>
<div>
    <span class="text-overflow-center">some text that will overflow</span>
</div>

그러면이 정의가 필요합니다.

.text-overflow-center {
    margin-left: -100%;
    margin-right: -100%;
    text-align: center;
}

의사 요소로 작업 할 수 있다면 html 없이도 작업 할 수 있습니다. 이러한 정의를 텍스트 컨테이너에 추가하기 만하면됩니다. http://jsfiddle.net/7287L9a8/

div:before {
    content: "";
    margin-left: -100%;
}
div:after {
    content: "";
    margin-right: -100%;
}

유사 변형의 유일한 단점은 한 줄의 텍스트에서만 작동한다는 것입니다.

---

구조에 Div 마술. 누구든지 관심이있는 경우 여기 에서 솔루션을 볼 수 있습니다 .

HTML :

<div id="outer">
    <div id="inner">
        <div id="text">some text</div>
    </div>
</div>
<div id="outer">
    <div id="inner">
        <div id="text">some text that will overflow</div>
    </div>
</div>

CSS :

#outer {
    display: block;
    position: relative;
    left: 100px;
    width: 100px;
    border: 1px solid black;
    background-color: silver;
}
#inner {
    /* shrink-to-fit width */
    display: inline-block;
    position: relative;
    /* shift left edge of text to center */
    left: 50%;
}
#text {
    /* shift left edge of text half distance to left */
    margin-left: -50%;
    /* text should all be on one line */
    white-space: nowrap;
}

---

이것은 오래된 질문처럼 보입니다.

이제 나는 flex에 대한 좋은 대답이 있다고 생각합니다.

다음과 같이 간단하게 수행 할 수 있습니다.

<div id="small_div">overflowing text</div>

#small_div {
    display: flex;
    justify-content: center;
}

그게 다야.

당신에게 많은 도움을 바랍니다!

---

이상한 요구 사항. 상자를 텍스트 크기로 확장합니다.

한 가지 가능한 해결책은 음수 텍스트 들여 쓰기를 포함 할 수 text-indent: -50px;있지만 작은 텍스트에는 작동하지 않습니다 ( DIV예제에서 먼저 ). 지금 여기에 더 좋은 생각이 없습니다.

---

시험

word-wrap:break-word;

대신에:

white-space:nowrap;

아니면 한 줄로만 원하십니까?

---

this one seems to work: add a wrapper block with position relative and left:50% margin-left:-100% you can see it here Here's the code:

<style>
div {
    display: block;
    position: relative;
    left: 100px;
    height:1.5em;
    width: 100px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid black;
    background-color: silver;
}
span{
    display:block;
    position:relative;
    left:50%;
    margin-left:-100%;
}
</style>
<div><span>some text</span></div>
<div><span>some text that will overflow</span></div>

---

To make the solution work for multi-line text, you can modify Nathan's solution by changing the #inner left from 50% to 25%.

---

Give the innermost div some margin: 0 -50%. If the elements are all display block or inline-block and text alignment is centered, this provides more shoulder room for the innermost element's text. At least, it works for me.

ReferenceURL : https://stackoverflow.com/questions/6618648/can-overflow-text-be-centered