0

I have 2 segments of text which I want to appear on the same line and then a vertical line between them like so:

blablablalbalblalbasldasd spacespacespacespace l spacespacespacespace blablablalbalbal

Sorry for the horrid example, but I'm not sure how to make multiple spaces here. The l in the middle is the verticle line intended.

Now one of my ideas would be to use the "tab" function in Microsoft word, but I don't know how to use that in HTML. As for the vertical line, I'm thinking perhaps putting a left border around the right segment of text?

But for this I need 2 < p > statements and if I make 2 < p > statements, the text appears on individual lines of text.

Any help appreciated!

user3066560
  • 25
  • 6
  • [Possible duplicate](http://stackoverflow.com/questions/1571648/html-tab-space-instead-of-multiple-nbsp) – ajp15243 Dec 05 '13 at 21:15
  • There is more to my problem. – user3066560 Dec 05 '13 at 21:19
  • Your `

    `s go on different lines because they are `block`-level content, which by default takes up the entire width of their line. You can either set `display:inline;` via CSS on the `

    ` tags, or just use ``s (which are `inline` by default) to get your content on the same line (assuming the summation of the widths of your content is less than the width of their container, otherwise your content will break to the next line without more CSS rules). From there, you can use the techniques in that linked question.

     – ajp15243 Dec 05 '13 at 21:22
  • That seems to work well. Now for my vertical line. Any ideas for that one? For my idea, I would need two < p >'s. – user3066560 Dec 05 '13 at 21:24
  • In between your ``s or inlined `

    `s, just put a `|` character, and add left/right `margin` rules to your ``/`

    ` elements. @showdev's answer is more or less that, although s/he put the `|` inside a `` and set `margin` on that, instead of setting `margin` on the elements containing the text.

     – ajp15243 Dec 05 '13 at 21:26
  • I need my line to be longer than the character | – user3066560 Dec 05 '13 at 21:38
  • Well, @showdev's edits in his/her answer seem to have addressed that. You basically do want to use `border`, and use `padding` to change the size of the element(s), which changes the border height. – ajp15243 Dec 05 '13 at 21:45

3 Answers3

2

I suggest that you use a <span> element (which is an inline element) for your separator and CSS margin to add space.

Something like this:

blah blah blah<span class="separator">|</span>blah blah blah

span.separator {
    margin:0 25px;
}

http://jsfiddle.net/D3Zsn/

Edit:

To have more control over the look of the separator, you can use a border (as mentioned by user3072059). However, I'd structure things differently in that situation:

<p>blah blah blah<span class="separator"></span>blah blah blah</p>

p {
    line-height:30px;
    border:1px solid #FAA; /* Show an outline (for debugging purposes) */
}

span.separator {
    border-left:1px solid #000;
    padding:5px 25px 5px 0;
    margin:0 0 0 25px;
}

Tweak the values as necessary to achieve the look you want.

http://jsfiddle.net/D3Zsn/2/

showdev
  • 28,454
  • 37
  • 55
  • 73
  • Thanks. This seems to work well if I had a fixed height of my line, but I need the line to be a little longer. – user3066560 Dec 05 '13 at 21:31
  • Gotcha. You can use a border, as mentioned by @user3072059. But, in that case, I would structure things differently. I've edited my answer with another method. – showdev Dec 05 '13 at 21:39
0

use the tabindex attr on spans within the < p > element

fauverism
  • 1,970
  • 3
  • 33
  • 59
0

You could use a <span> element to style the <p> inline.

Like this:

<p>Blablabla<span class="border_left">bla bla bla<span><p>

<style>
.border_left{
   border-left: 1px solid #000;
}
</style>
John Conde
  • 217,595
  • 99
  • 455
  • 496
user3072059
  • 16
  • 1