Firefox and Chrome wrap long titles differently

[pdehaan]

Weird bug, but not sure how/if we can work around it...

Here is the Mark Surman tweet from the sample data in Firefox 36 (Beta): Figure 1: Tweet w/ long URL/title in Firefox 36.

Here is the same tweet in Chrome 40 (Release): Figure 2: Tweet w/ long URL/title in Chrome 40.

Note that the link doesn't wrap on the slashes, so it falls beneath the image.

Here's the same tweet in Chrome if I use developer tools and make the link artificially longer: Figure 3: Tweet w/ longER URL/title in Chrome.

Also note that the unbreaking URL now allows me to scroll horizontally: Figure 4: Tweet (scrolled) in Chrome.

Weird. Not sure if there is an obscure wrapping flag in CSS which can give Chrome a more Firefox-like behavior.

[johngruen]

lame

[jaredhirsch]

word-wrap: break-word; should fix this in Chrome

[nchapman]

word-wrap: break-word; should fix this in Chrome

It fixes it a little bit... It does keep it from overflowing the container, but it still ends up on the line beneath the image and then breaks the word at the edge of the container.

[jaredhirsch]

doh!

There's always http://philipwalton.github.io/solved-by-flexbox/demos/media-object/

BTW I solemnly swear not to bring up flexbox in another CSS bug for the remainder of the sprint ;-)

[nchapman]

@6a68 lol you're right to bring up flexbox. @johngruen is on board to flexbox all the things. I didn't do it because I was in a hurry, and it's unfamiliar territory, but let's go for it!

[pdehaan]

Here's a fun little factoid:

Here's my local ElasticSearch for "twitter"; http://localhost:9200/chronicle/_search?size=100&q=twitter&pretty=1:

{
  "hits" : {
    "hits" : [ {
      "_index" : "chronicle",
      "_type" : "userPages",
      "_id" : "14f5f6eb-ffa2-4292-9abf-aae06b4aa97d",
      "_score" : 0.51084256,
      "_source" : {
        "extractedTitle": "Mozilla on Twitter",
        "title": "http://twitter.com/mozilla/status/560513225872392192/photo/1"
      }
    }, {
      "_index" : "chronicle",
      "_type" : "userPages",
      "_id" : "d344df1c-5365-4bad-b989-594348ad8c8c",
      "_score" : 0.48126966,
      "_source": {
        "extractedTitle": "Mozilla (@mozilla) | Twitter",
        "title": "Mozilla (@mozilla) | Twitter"
      }
    } ]
  }
}

You can see that the first result's title is actually a full URL, whereas the extractedUrl is marginally friendlier. Not sure if using the extractedUrl would give you the desired results if you were behind a login or browsing something on localhost that Embed.ly couldn't access.