Question

我正在尝试将span中的文本与引号字形对齐。 display: -moz-grid;将创建预期的行为，但会忽略div，而不是跨浏览器解决方案。

还有别的吗？

<div>
  <i class="fa fa-quote-left"></i>
  <span>Some random text Some rando random text Some random text Some random text Some random text Some random text</span>
</div>

div {
  width: 400px
}

span {
  display: -moz-grid;
}

http://jsfiddle.net/k1byph3h/

Answer 1

你要去悬挂缩进吗？您可以通过创建block formatting context来实现。下面的方法使用overflow:hidden，它通常对没有设置宽度和高度的元素没有可见的影响;但您可以使用该MDN页面上列出的任何一种方法。

div {
  width: 400px
}

i.fa {
  float:left;
  margin-right: 0.2em;
}
span {
  overflow:hidden;
  display:block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div>
  <i class="fa fa-quote-left"></i>
  <span>Some random text Some rando random text Some random text Some random text Some random text Some random text</span>
</div>

将文本与字形对齐

1 个答案: