Laravel Carbon日期格式在Bootstrap弹出框中显示异常

你碰到的这个问题其实是HTML属性解析规则导致的，我之前也踩过类似的坑！

先看你写的popover代码：

<a href="#RE" data-toggle="popover" title="How long since acquired" data-content={{$lengthOwned}}>CLICK FOR TIME LAPSED</a>

当$lengthOwned的值是4 months after时，页面渲染后的HTML会变成这样：

<a href="#RE" data-toggle="popover" title="How long since acquired" data-content=4 months after>CLICK FOR TIME LAPSED</a>

浏览器解析HTML属性时，默认会把第一个空格之前的内容当作属性值，所以data-content被识别成了4，后面的months和after直接被当成无效的独立属性，自然就丢失了。

解决办法：给data-content的值加上双引号 #

修改Blade代码，把data-content={{$lengthOwned}}改成带双引号的写法：

<a href="#RE" data-toggle="popover" title="How long since acquired" data-content="{{$lengthOwned}}">CLICK FOR TIME LAPSED</a>

这样渲染后的HTML会变成：

<a href="#RE" data-toggle="popover" title="How long since acquired" data-content="4 months after">CLICK FOR TIME LAPSED</a>

浏览器就能完整识别整个字符串作为data-content的属性值，popover里就能正常显示Carbon生成的完整时间差文本了。

另外不用担心转义问题，Laravel Blade的{{ }}语法会自动对特殊字符做HTML转义，哪怕内容里有引号或者其他特殊符号，也能安全渲染。

内容的提问来源于stack exchange，提问作者Hondaman900