Question

免责声明：我以前见过与此类似的线程，但是似乎都没有作用。我的布局如下所示：

看到粉红色的文字吗？好吧，我希望在换行符之后将其与Initial text对齐，而不要从div的开头开始，而div会将其全部包裹起来。

正如其他主题所暗示的那样，我在display: inline-block上玩了一点，它只使整个粉红色的文字变淡，但对对齐没有任何作用。在这种情况下，我应该怎么做才能使断行后Initial text从同一位置开始？

这是我当前的JSX代码：

  <div style={{width: '500px'}}>
    <span>5-</span>
    <span className='label-margins label label-default' style={{backgroundColor: 'rgb(FF, AA, AA)'}}>Some Label</span>
    <span>
      <span className='initial-text'>Initial text</span>
      <small className='warning-text'>
        Warning text. Blablablablabalbalbalablablablablablablablabalb asbhlablablanl akbadlnalbnda kbadslkds baksdbld
      </small>
    </span>
  </div>

这是相关的CSS：

.initial-text {
  padding: 0 4px;
}

.warning-text {
  color: #ff8080;
  padding: 3px 7px;
}

另外，我的功能齐全的示例：

class App extends React.Component {
  
  render() {
    return (
      <div style={{width: '500px'}}>
        <span>5-</span>
        <span className='label-margins label label-default' style={{backgroundColor: 'rgb(FF, AA, AA)'}}>Some Label</span>
        <span>
          <span className='initial-text'>Initial text</span>
          <small className='warning-text'>
            Warning text. Blablablablabalbalbalablablablablablablablabalb asbhlablablanl akbadlnalbnda kbadslkds baksdbld
          </small>
        </span>
      </div>
    )  
  }

}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.initial-text {
  padding: 0 4px;
}

.warning-text {
  color: #ff8080;
  padding: 3px 7px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 1

Flexbox可以做到这一点...将flexbox应用于父级div和span和...

.initial-text {
  padding: 0 4px;
  flex: 1 0 auto;
}

.warning-text {
  color: #ff8080;
  padding: 3px 7px;
}

.wrap {
  display: flex;
}

div {
  display: flex;
  align-items:flex-start;
}

class App extends React.Component {

  render() {
    return ( <
      div style = {
        {
          width: '500px'
        }
      } >
      <
      span > 5 - < /span> <
      span className = 'label-margins label label-default'
      style = {
        {
          backgroundColor: 'rgb(FF, AA, AA)'
        }
      } > Some Label < /span> <
      span className = "wrap" >
      <
      span className = 'initial-text' > Initial text < /span> <
      small className = 'warning-text' >
      Warning text.Blablablablabalbalbalablablablablablablablabalb asbhlablablanl akbadlnalbnda kbadslkds baksdbld <
      /small> < /
      span > <
      /div>
    )
  }

}

ReactDOM.render( <
  App / > ,
  document.getElementById('app')
);

.initial-text {
  padding: 0 4px;
  flex: 1 0 auto;
}

.warning-text {
  color: #ff8080;
  padding: 3px 7px;
}

.wrap {
  display: flex;
}

div {
  display: flex;
  align-items: flex-start;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

您是否尝试过使用dl列表？您可以调整样式以便使用float获得所需的内容：

<style> dl {clear:both} dt,dd {float: left} </style>

<dl>
  <dt> example</dt>
  <dd>this is some very very very very long long long long text inorder to expand the line to another line. This is some other example text bla bla bla yada yada yada etc... Read more about this element here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl </dd>
</dl>

祝你好运！

换行后将文本与上一个文本对齐

2 个答案: