How to indent wrapped lines?

Discussion in 'HTML & Website Design' started by ihorko, Jul 31, 2009.

0
  1. #1
    Hello!

    I have some text in span tag, in browser it shows like:

    You may now proceed to edit your Profile in order to fill in additional personal
    details about yourself, or you could modify your Options to customize your
    browsing experience of this site. If you would rather do these things later,
    you can do so by following the links around the site to your User Control
    Panel.

    but I need add some style to show it like:

    You may now proceed to edit your Profile in order to fill in additional personal
    ]2 line[ details about yourself, or you could modify your Options to customize your
    ]3 line[ browsing experience of this site. If you would rather do these things later,
    ]4 line[ you can do so by following the links around the site to your User Control
    ]5 line[ Panel.

    So, all text should be in one span, first line of text shoulb be in left but all next lines should have an intend (replace ]# line[ with spaces) ?

    Thank you!
     
    ihorko, Jul 31, 2009 IP
  2. qazu

    qazu Well-Known Member

    Messages:
    1,834
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    165
    #2
    It's a bit complicated. First give the span a padding-left. Then use text-indent with a negative indent.

    Something like this:

    span {padding-left:35px; text-indent:-35px;}
     
    qazu, Jul 31, 2009 IP
  3. ihorko

    ihorko Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    it doesn't work, maybe you have some other example?
     
    ihorko, Jul 31, 2009 IP
  4. qazu

    qazu Well-Known Member

    Messages:
    1,834
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    165
    #4
    Do you have a link where I can see exactly what you're doing?
     
    qazu, Jul 31, 2009 IP
  5. ihorko

    ihorko Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Could you open code below in your IE browser

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">

    <HTML xmlns="http://www.w3.org/1999/xhtml">
    <HEAD><STYLE>
    HTML
    {
    max-height: 100%;
    }
    BODY
    {
    margin: 0px auto;
    max-height: 100%;
    }
    .container
    {
    background-image: url(../IMD/petstore/cont_bg.gif); TEXT-ALIGN: left;
    padding-bottom: 0px;
    margin: 20px auto 0px;
    padding-left: 0px;
    width: 1001px;
    padding-right: 0px;
    display: block;
    background-repeat: repeat-y;
    font-family: Arial, Helvetica, Sans-Serif;
    max-height: 100%;
    vertical-align: top;
    overflow: hidden;
    padding-top: 0px;
    }
    .nav_column
    {
    padding-bottom: 0px;
    background-color: transparent;
    margin: 0px 0px 2px;
    padding-left: 0px;
    width: 180px;
    padding-right: 0px;
    float: left;
    height: 100%;
    padding-top: 0px;
    }
    .nav_box_left
    {
    border-left: #cccccc 1px solid;
    padding-bottom: 0px;
    background-color: #dde8ff;
    margin: 0px 0px 3px;
    padding-left: 0px;
    width: 178px;
    padding-right: 0px;
    font-family: Arial, Helvetica, Sans-Serif;
    float: left;
    height: auto;
    font-size: 11px;
    border-top: #cccccc 1px solid;
    font-weight: 700;
    border-right: #cccccc 1px solid;
    padding-top: 0px;
    }
    .nav_box_left A:link
    {
    padding-bottom: 0px;
    margin: 0px;
    padding-left: 6px;
    padding-right: 4px;
    color: #003366;
    font-weight: 700;
    text-decoration: none;
    padding-top: 0px;
    }
    A:link
    {
    background-color: transparent;
    font-family: Arial, Helvetica, Sans-Serif;
    color: #003366;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    }
    BODY
    {
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    font-family: Arial, Helvetica, Sans-Serif;
    background: #ffffff;
    height: 100%;
    color: #3b3b3b;
    font-size: 11px;
    padding-top: 0px;
    }

    </STYLE></HEAD>
    <BODY>
    <form id="aspnetForm" method="post" name="aspnetForm" action="search.aspx">
    <div class="container">
    <div class="nav_column">
    <div class="nav_box_left">
    <span style="width: 100%; display: inline-block">
    <span><a href="http://localhost:4312/">
    You may now proceed to edit your Profile in order to fill in additional personal details about yourself, or you could modify your Options to customize your browsing experience of this site. If you would rather do these things later, you can do so by following the links around the site to your User Control Panel.
    </a>
    </span>
    </span>
    </div>
    </div>
    </div>
    </form>
    </BODY></HTML>
     
    ihorko, Jul 31, 2009 IP