Breaking to a new line with inline-block?

Question

I want to remove the
\'s and do the break lines through CSS. If I change the spans to display:block the width will go 100% and I need the w

Answer 1

If you're OK with not using

s (only

s and 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

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 s with a corresponding

. This way we're taking advantage of the line break caused by the

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

  
We
  
build
  
the
  
Internet

0 讨论(0)

查看其它8个回答

发布评论:

提交评论

---

•  加载中...