将文本换行到按钮内

<button style="white-space: pre-wrap;">
    这是一段较长的文本内容，可以在按钮内换行显示。
</button>

<button id="myButton"></button>

<script>
    var button = document.getElementById("myButton");
    var text = "这是一段较长的文本内容，可以在按钮内换行显示。";
    
    // 计算文本的宽度
    var textWidth = getTextWidth(text);
    
    // 获取按钮的宽度
    var buttonWidth = button.offsetWidth;
    
    // 判断是否需要换行
    if (textWidth > buttonWidth) {
        // 添加换行符
        var newText = addLineBreaks(text);
        button.innerHTML = newText;
    } else {
        button.innerHTML = text;
    }
    
    // 计算文本的宽度
    function getTextWidth(text) {
        // 使用canvas来计算文本的宽度
        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d");
        context.font = getComputedStyle(button).font;
        var metrics = context.measureText(text);
        return metrics.width;
    }
    
    // 添加换行符
    function addLineBreaks(text) {
        // 在适当的位置添加换行符
        // 这里可以根据需要进行自定义的换行逻辑
        var newText = text.replace(/(.{10})/g, "$1\n");
        return newText;
    }
</script>