Thu. Mar 23rd, 2023

[ANSWERED] html – I am not able to align the lines of the paragraph. Means from where the 1st line begin, I want a 2nd line to be begin from there too

By

Nov 19, 2022 css, html

Solution 1 :

You can alter the margins/padding and move the icon over into the extra space.

.sh-msg {
    font-style: normal;
    /* altered the padding */
    padding: 20px 20px 20px 40px;
    display: block!important;
    clear: both;
    line-height: 1.5em;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 2px solid rgba(0,0,0,0.05);
    color: #FFF;
    font-weight: 400;
    font-size: 13px;
    text-align: justify;
    box-shadow: 0px 2px 8px 3px #ccc;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.sh-msg:before {
    content: "f05a";
    /* altered position/display */
    position: absolute;
    /* added margin */
    margin-left: -25px;
    display: block;
    padding-left: 0;
    font-family: 'FontAwesome';
    font-size: 22px;
    vertical-align: middle;
    font-weight: 400;
}
.sh-msg {
    background-color: #8870FF;
}

<span class="sh-msg">
  <b> Note:</b> You can not change the number of votes. The maximum is 100 whereas the number of the minimum votes is 20. The Star Rating widget script will show the rating that you select from 1 to 5 and your readers can not vote.
</span>

Solution 2 :

This method gives spacing on the left side, and based on your supplied code also vertically centers the icon. You may need to adjust spacing based on the size of the actual icon once that’s loaded. Flexbox is used to allow vertical spacing of that icon element.

.sh-msg {
  font-style: normal;
  padding: 20px 20px 20px 50px;
  display: flex;
  align-items: center;
  position: relative;
  clear: both;
  line-height: 1.5em;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 2px solid rgba(0, 0, 0, 0.05);
  color: #FFF;
  font-weight: 400;
  font-size: 13px;
  text-align: justify;
  box-shadow: 0px 2px 8px 3px #ccc;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.sh-msg:before {
  content: "f05a";
  position: absolute;
  left: 20px;
  font-family: 'FontAwesome';
  font-size: 22px;
  margin: auto;
  font-weight: 400;
}

.sh-msg p {
  margin: 0;
}

.sh-msg {
  background-color: #8870FF;
}

<h3>
  Important Notice About Blogger Widget
</h3>

----

<span class="sh-msg">
  <p><strong>Note:</strong> You cannot change the number of votes. The maximum is 100 whereas the number of the minimum votes is 20. The Star Rating widget script will show the rating that you select from 1 to 5 and your readers can not vote.</p>
</span>

Problem :

I am sorry I don’t know whether you understand my question from the title or not But you may understand it from the image I have shared. I want a line to align to the red line. Means from where the First word starts, I want the 2nd line also to start from there.
I have shared my coding as well. Please review it and let me know what is missing.

Here is the code I am using

<h3>
  Important Notice About Blogger Widget
</h3>

----

<span class="sh-msg">
  <b> Note:</b> You can not change the number of votes. The maximum is 100 whereas the number of the minimum votes is 20. The Star Rating widget script will show the rating that you select from 1 to 5 and your readers can not vote.
</span>

<style>
.sh-msg {
    font-style: normal;
    padding: 20px 20px;
    display: block!important;
    clear: both;
    line-height: 1.5em;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 2px solid rgba(0,0,0,0.05);
    color: #FFF;
    font-weight: 400;
    font-size: 13px;
    text-align: justify;
    box-shadow: 0px 2px 8px 3px #ccc;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.sh-msg:before {
    content: "f05a";
    display: inline-block;
    padding-left: 0;
    font-family: 'FontAwesome';
    font-size: 22px;
    vertical-align: middle;
    font-weight: 400;
}
.sh-msg {
    background-color: #8870FF;
}
</style>

Comments

Comment posted by stackoverflow.com/q/65675921/8620333

if you read the duplicate question

Comment posted by karolus

Glad I could help! If it works for you, don’t forget to vote it up.

Comment posted by Ahmad Shah

@korolus, Done bro <3

By

Related Post

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022