How to get the text to be in alignment after a line break in react js

Question

I cant get the text to be in alignment after the line break. I have tried using css (margin bottom on the text, etc).

Margin bottom does not work. Also tried to change the line height buit to no avail.

<Col md={6}>
  <ul className="deets">
    <li><FaRegHandshake classname="icons"/><span style={{marginBottom:"90", marginLeft:"5px"}}>Let us help you  {this.state.personalized}</span></li>
    <li><FaPhone classname="icons"/><span style={{marginBottom:"90", marginLeft:"5px"}}>Our representative contacts you within 24 hours</span></li>
    <li><FaToolbox classname="icons"/><span style={{marginBottom:"90", marginLeft:"5px"}}>We collect all the necessary requirements from you</span></li>
    <li><FaUserSecret classname="icons"/><span style={{marginBottom:"90", marginLeft:"5px"}}>We keep confidentiality with all of our clients by signing NDA</span></li>
  </ul>
</Col>

This is an image of my current problem

The problem is that for each <li> element, when the text wraps, the text on the second line lines up horizontally with the image above it and is not indented to line up horizontally with the text above it that is part of the same <li>.

i do not understand your question - how do you want to align the text? maybe your custom styles and classes break the alignment. the example in the snippet is working because those inline styles are not applied — messerbill, Jan 04 '19 at 20:51
the text is wrapping, you can try a no-wrap, or, you can add some css to the li to make it `flex` and give it a `flex-direction: row` which should float the icon and text span side-by-side, and if the text wraps, it should not wrap under the icon, but itself (it should be contained to it's div) — HolyMoly, Jan 04 '19 at 20:54
if you see the image, there are the text after the line break. I dont want the text underneath to be underneath the icon,but align with where the text above it starts — Kenny Quach, Jan 04 '19 at 20:54
Possible duplicate of [Margin-Top not working for span element?](https://stackoverflow.com/questions/11700985/margin-top-not-working-for-span-element) — Titus, Jan 04 '19 at 20:56
i generally do not open linked images. But i now understand your problem. check @HolyMoly answer — messerbill, Jan 04 '19 at 21:00
@zgood I've reread the question and it's not really a duplicate but it has the same problem as the OP of that question, vertical margin on `span` elements. — Titus, Jan 04 '19 at 21:03

score 1 · Accepted Answer · answered Jan 04 '19 at 20:56

1

try:

li {
  display: flex;
  flex-direction: row;
}

you can probably remove the inline styling

answered Jan 04 '19 at 20:56

HolyMoly

2,020
3
22
35

The image with be expanded to the size of the paragraph by default, and if not, it will be centered in the flex container. Neither of wich correspond to what the OP asked for. This answer was never tested – Treycos Jan 04 '19 at 21:07
@Treycos actually, the question is just asking how to stop the text from wrapping from under the icon, which this answer solves, does it not? – HolyMoly Jan 04 '19 at 21:12
Uh, from what I understand he wants a result similar to the given image without the wrapping – Treycos Jan 04 '19 at 21:17
he said in the comments " I dont want the text underneath to be underneath the icon,but align with where the text above it starts" - for clarity, but i was also able to see his goal after looking at his image. this answer is a valid solution. the rest is bells and whistles and he can probably figure out himself (as we should allow him to as it is good for learning) - he simply asked a way to align the text under itself and not the icon. – HolyMoly Jan 04 '19 at 21:19
Thanks! This did it for me! @HolyMoly – Kenny Quach Jan 04 '19 at 21:21
@KennyQuach Yay! Please mark this answer as accepted in that case =) also, flexbox is a lifesaver in CSS, it will save you a ton of headache, lol. Here is a GREAT link that I refer to a lot: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – HolyMoly Jan 04 '19 at 21:22
@HolyMoly Thanks for the references! – Kenny Quach Jan 04 '19 at 21:24

Hamed · Answer 2 · 2019-01-04T21:09:51.720

This may give you an idea:

class App extends React.Component {
  render() {
    return ( 
      <ul>
        <li><div className='item'><div className='left'>1</div><div className='right'>2</div></div></li>
        <li>3</li>
        <li>4</li>
      </ul>
    );
  }
}

ReactDOM.render( < App / > ,
  document.getElementById('root')
);

.item {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}

.right {
  align-self: flex-end;
  border: 1px solid black;
  width: 30%;
}

.left {
  align-self: flex-start;
  border: 1px solid blue;
  width: 30%;
}

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script><div id="root" />

Treycos · Answer 3 · 2019-01-04T21:18:18.943

Using flex should solve your problem, do not forget about setting a fixed size to your image to avoid having it stretch, and set the align-items to flex-start to have your icon on the top

Working example :

li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

li img {
  width: 30px;
  height: 30px;
}

<Col md={6}>
  <ul className="deets">
    <li><img src="https://img.icons8.com/ios-glyphs/30/000000/albatross.png"><span style={{marginBottom:"90", marginLeft:"5px"}}>Our representative conzrhtzhtthhtrhtrhtrhtthzrthhhhhhhhhhhhhhhhh<br/>hhhhhhhhhhhhhhhhhh<br/>hhhhhhhhhhhhhhhtaqergergerhgerherhqerherhqerherhqerhqerhqerhqerherhqerheherherhcts you within 24 houerqgerhqerhqretjhqerjqertjqrtjqrtjqrtjrtjrs</span></li>
    <li><img src="https://img.icons8.com/ios-glyphs/30/000000/albatross.png"><span style={{marginBottom:"90", marginLeft:"5px"}}>We collect all the necessary requirements from you</span></li>
    <li><img src="https://img.icons8.com/ios-glyphs/30/000000/albatross.png"><span style={{marginBottom:"90", marginLeft:"5px"}}>We keep confidentiality<br/> with all of our clients<br/> by signing<br/> NDA</span></li>
  </ul>
</Col>

How to get the text to be in alignment after a line break in react js

3 Answers3