인라인 블록으로 새 줄을 끊으셨습니까?

인라인 블록으로 새 줄을 끊으셨습니까?

---

나는의를 제거하고 <br />CSS를 통해 줄 바꿈을하고 싶습니다 . 스팬을 display:block너비로 변경하면 100 %가되고 너비는 지금과 같이 정확히 텍스트 길이가되어야합니다. 어떤 제안?

<div class="fullscreen">
    <p class="text">
        <span class="medium">We</span> <br />
        <span class="large">build</span> <br />
        <span class="medium">the</span> <br />
        <span class="large">Internet</span>
    </p>
</div>

.text span {
   background:rgba(165, 220, 79, 0.8);
   display:inline-block;
   padding:7px 10px;
   color:white;
}
.fullscreen .large {  font-size:80px }

피들

---

모든 br태그를 제거하고 display: table.

.text span {
   background: rgba(165, 220, 79, 0.8);
   display: table;
   padding: 7px 10px;
   color: white;
}
.fullscreen .large { font-size: 80px }

---

사용 float: left;및clear: left;

http://jsfiddle.net/rtM6J/

.text span {
   background: rgba(165, 220, 79, 0.8);
   float: left;
   clear: left;
   padding: 7px 10px;
   color: #fff;
}

---

항목을 설정 display: inline하고 사용하십시오 :after.

.text span { display: inline }
.break-after:after { content: '\A'; white-space:pre; }

html 범위에 클래스를 추가하십시오.

<span class="medium break-after">We</span>

---

다음은 또 다른 솔루션입니다 (관련 선언 만 나열 됨).

.text span {
   display:inline-block;
   margin-right:100%;
}

여백을 백분율로 표시 할 때 해당 백분율은 부모 노드의 너비에서 가져 오므로 100 %는 부모와 같은 너비를 의미하므로 다음 요소가 새 줄로 "밀어"집니다.

---

2018 년 현재이 작업을 수행하는 가장 좋은 방법은 flexbox를 사용하는 것입니다.

.text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* same as original below */
.text span {
   background:rgba(165, 220, 79, 0.8);
   display:inline-block;
   padding:7px 10px;
   color:white;
}
.fullscreen .large {  font-size:80px }

<div class="fullscreen">
    <p class="text">
        <span class="medium">We</span> 
        <span class="large">build</span> 
        <span class="medium">the</span> 
        <span class="large">Internet</span>
    </p>
</div>

---

I think floats may work best for you here, if you dont want the element to occupy the whole line, float it left should work.

.text span {
       background:rgba(165, 220, 79, 0.8);
       float: left;
       clear: left;
       padding:7px 10px;
       color:white;
    }

Note:Remove <br/>'s before using this off course.

---

If you're OK with not using <p>s (only <div>s and <span>s), this solution might even allow you to align your inline-blocks center or right, if you want to (or just keep them left, the way you originally asked for). While the solution might still work with <p>s, I don't think the resulting HTML code would be quite correct, but it's up to you anyways.

The trick is to wrap each one of your <span>s with a corresponding <div>. This way we're taking advantage of the line break caused by the <div>'s display: block (default), while still keeping the visual green box tight to the limits of the text (with your display: inline-block declaration).

.text span {
   background:rgba(165, 220, 79, 0.8);
   display:inline-block;
   padding:7px 10px;
   color:white;
}
.large {  font-size:80px }

<div class="text">
  <div><span class="medium">We</span></div>
  <div><span class="large">build</span></div>
  <div><span class="medium">the</span></div>
  <div><span class="large">Internet</span></div>
</div>

---

You can try with:

    display: inline-table;

For me it works fine.

참고URL : https://stackoverflow.com/questions/14831866/breaking-to-a-new-line-with-inline-block