Quiero tomar el título de un elemento en una matriz de objetos y mostrarlo en la consola. Sin embargo, todo en el título se trunca después de un espacio en blanco. ¿Cómo superas este problema?

Aquí está el código:

 const menu = [ { id: 1, title: "GUNPOWDER GOBHI", category: "Small Plates", price: 16.99, img: "sp1.png", desc: `Crispy Cauliflower, Spicy Lentil Dust`, }, ] window.addEventListener("DOMContentLoaded", function () { initialDisplay(menu); }); function diplayMenuItems(menuItems) { let displayMenu = menuItems.map(function (item) { return `<article class="menu-item"> <img src=${item.img} alt=${item.title} class="photo" /> <div class="item-info"> <h4>${item.title}</h4> <h4 class="price">$${item.price}</h4> <p class="item-text"> ${item.desc} </p> <button class="add-btn" data-title=${item.title}>Add To List</button> //I insert the title in the data </div> </article>`; }); displayMenu = displayMenu.join(""); sectionCenter.innerHTML = displayMenu; const addBtns = document.querySelectorAll('.add-btn'); addBtns.forEach(function(btn){ btn.addEventListener('click', function(e){ const title = e.currentTarget.dataset.title; //I grab title console.log(title); // The title is displayed but everything after the white space doesn't show up }); }); }