1

Spending most of my time in a backend, frontend isn't really my forte and my skills in debugging are next to none for it (aside from F12 trial-and-error).

I have created a list (for Google Maps purposes) from the data entered backend side.

As you can see, treybake2 has the email of: t.taylor@domain.co.uk - 21 characters.

treybake has an email of t.taylor@some-domain.co.uk - 26 characters.

Yet, the latter of the options (which has the longer email) seems to wrap how I'd expect whereas the shorter email address drops to a new line entirely.

Here is the markup for the tel/email section:

<div class="col-sm-12 no-padding">
    <div class="col-sm-6 no-padding">
        <i class="fas fa-phone fa-rotate-90"></i>
        <span><?php echo $dealer->tel; ?></span>
    </div>

    <div class="col-sm-6 no-padding">
        <i class="fas fa-envelope"></i>
        <span><?php echo $dealer->email; ?></span>
    </div>
</div>

As you can see by the class names, it uses Bootstrap.

Here is, hopefully, the relevant CSS:

#dealer-list {
    background: #f6f6f6;
    height: 350px;
    margin-bottom: 0;
    margin-top: 0;
    overflow-y: scroll;
    padding: 20px 15px
}

#dealer-list li {
    background: #fff;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, .1);
    font-size: 12px;
    margin-bottom: 15px;
    padding: 15px
}

#dealer-list li div {
    margin: 5px 0
}

div.no-padding {
    padding: 0
}

I'm for the most-part, a scrub when it comes to frontend, and I can't really set up xdebug for this kinda thing xD

So, how do I begin to try and debug my span? Logically, if any were to drop to a new line, surely it would be treybake2? Why is the other way round?

Edit:

Forgot to put in my desired output: treybake is how I want all emails to be displayed.

enter image description here

treyBake
  • 6,440
  • 6
  • 26
  • 57
  • 2
    Because a dash (`-`) is a breaking point. – Roy May 30 '19 at 15:54
  • @Roy huh.. that's weird.. why is not just "here's the string?" xD OK.. so how does one resolve? Or where do I go to find the answer? – treyBake May 30 '19 at 15:56
  • 1
    https://developer.mozilla.org/en-US/docs/Web/CSS/word-break – epascarello May 30 '19 at 15:57
  • Possible duplicate of [How can I force a long string without any blank to be wrapped?](https://stackoverflow.com/questions/499137/how-can-i-force-a-long-string-without-any-blank-to-be-wrapped), assuming you want the email to wrap (you don't actually say in your question *hint*) – Heretic Monkey May 30 '19 at 15:57
  • @HereticMonkey see my edit ;) – treyBake May 30 '19 at 16:01
  • Then that dupe should work. It should ask if that question's answers answer your question... – Heretic Monkey May 30 '19 at 16:03
  • @HereticMonkey yee done and done, will take your word for it, this frontend bs honestly confuses me to heck xD – treyBake May 30 '19 at 16:03

0 Answers0