4

When an item in my bulleted list is long enough to wrap, I need the wrapped part to line up on the left with the first line, starting to the right of the bullet, rather than starting underneath the bullet.

How can I achieve this?

enter image description here

At the moment I've got the following code.

CSS and HTML

.row2 {
      padding: 20px 20px 5px 20px;
      height: auto;
      overflow: hidden;
   max-width: 500px; }

    .red-square-5 {
      width:5px;
   height:5px;
   background:#f00;
   display:inline-block; }
<div class="row2">
<p><div class="red-square-5"></div>&nbsp;&nbsp;Long long long long long long long long long long long long long long long long long long long long long long long long long title</p>
</div>
  • 1
    Is there a reason why you don't use `
      ` and `
    • `?
     – zer00ne Sep 11 '17 at 00:09
  • Not an especially good one. Partly I want to tinker with the bullet definition in the CSS; partly my avoiding `
      ` and `
    • ` is just a foible.
     –  Sep 11 '17 at 00:38

3 Answers3

2

My take on this would be to include the bullet in another div and then wrap both divs in a container div.

.row2 {
    padding-left: 20px;
    overflow: hidden;
    max-width: 500px; 
}
.red-square-5 {
    position:absolute;
    width:5px;
    height:5px;
    margin-top: 0.5em;
    background:#f00; 
}
<div class="container-div">
    <div class="red-square-5"></div>
    <div class="row2">
        Long long long long long long long long long long long 
        long long long long long long long long long long long 
        long long long title
    </div>
</div>

And this would be the solution using unordered list, as seen here: How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em; 
  text-indent: -0.8em;
}

li::before {
  content: "■ ";
  color: red; /* or whatever color you prefer */
}
<ul>
  <li>Long long long long long long long long long long long long long long long long long long lng long long long long long long title
  </li>
</ul>
Aydin4ik
  • 1,782
  • 1
  • 14
  • 19
  • My mistake, misunderstood what "first line" meant in the question. – Aydin4ik Sep 10 '17 at 23:50
  • So fix is inline-block on whole div? –  Sep 10 '17 at 23:51
  • 1
    No, it is to have 2 divs, but there is a better way with `
    • `, I'll add it later if I have time.
     – Aydin4ik Sep 10 '17 at 23:56
  • Cool! Maybe my answer is the ul solution you mean? Or hopefully close :D –  Sep 10 '17 at 23:58
  • I've clarified the question. –  Sep 10 '17 at 23:58
  • 1
    @DaniSpringer It is a bit different, it uses li:before to add a custom red bullet. – Aydin4ik Sep 11 '17 at 00:06
  • 1
    Right! I should have thought of that _before_. –  Sep 11 '17 at 00:06
  • @DaniSpringer nice pun :) – Aydin4ik Sep 11 '17 at 00:09
  • Excuse my ignorance, but do I need to define `container-div` in the CSS and if the answer is "yes, and you can make the definition null", how should I do that? –  Sep 11 '17 at 23:37
  • 1
    @ruffle, No you don't need to define `container-div`. The only reason I put it there is to give a wrapper to the block - for instance, if you want to iterate through the list items or delete one or whatnot, you have one `div` to reference instead of two. – Aydin4ik Sep 12 '17 at 00:03
  • Many thanks for explaining this. That may indeed make things easier. –  Sep 12 '17 at 09:21
0

I'll consider a related case in which you can't use UL to handle the hanging indent: checkboxes.

Checkboxes have always been presented with hanging indents. It is a source of wonder that there is no baked-in support for this. But anyway...

The old-school way is with a table. This works but may offend purists.

Aydin's use of the CSS text-indent attribute can be used with a block element the content of which starts with <input type="checkbox" />. Note that it need not be a div. Any element styled as a block will be fine. It is also possible to use glyphicons (Bootstrap) and handle user input events yourself. If you want to do this but still use data-binding then set the value of an <input type="hidden"> and you can bind that. Be aware that you may need to explicitly trigger binding updates when setting the value programmatically.

Peter Wone
  • 17,965
  • 12
  • 82
  • 134
0

to archieve that so, get the line of "long long long long long long long long long long long long long long title" and add this ascii character; " & n b s p ;" Source: &nbsp and HTML Space Challenges and Tricks

add enough until you get the right position.

Oscar Hernandez
  • 1
  • 2