HTML中Bootstrap卡片内ASCII艺术字使用pre标签格式异常问题求解

解决方案 #

你出现格式错乱是三个核心原因导致的：未使用等宽字体渲染ASCII、父元素居中对齐属性继承破坏了ASCII原始排版、外层容器高度不足导致内容截断。按照以下步骤修改即可：

1. 新增针对pre标签的样式规则，写入你的CSS文件：

pre.card-text {
    /* 强制使用等宽字体，保证每个字符、空格宽度一致 */
    font-family: monospace, 'Courier New', Courier;
    /* 取消继承的居中对齐，保留ASCII原始排版逻辑 */
    text-align: left;
    /* 让整个ASCII块在卡片内居中，不影响内部排版 */
    margin: 1rem auto 0;
    /* 宽度自适应内容 */
    width: fit-content;
    /* 强制保留空格、换行符 */
    white-space: pre;
    overflow: visible;
}

2. 修改.content容器的高度配置，避免内容被截断：

.content {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: 400px;
    /* 替换原固定150px高度，改为自适应 */
    height: auto;
    text-align: center;
    color: #fff;
    transform: translate(-50%, -50%);
}

修改后即可正常渲染ASCII艺术字，不需要调整原有HTML结构。

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