如何使用CSS和HTML实现自定义文本展示效果

首先得说，虽然你没贴出具体样式的图片，但我先拿一个常用的卡片式高亮文本展示为例来写方案，你可以根据自己的需求调整样式参数——完全是纯文本展示，和输入框功能无关哈。

步骤1：搭建HTML结构 #

咱们用一个容器包裹文本内容，给它加个专属类名方便后续写样式，结构简单清晰：

<div class="custom-text-block">
  <h4>自定义文本标题</h4>
  <p>这是要展示的核心文本内容，支持多行排版，还能嵌套*强调内容*、`代码片段`这类格式元素。</p>
  <p>再补一段文本，测试下多行内容的适配效果，确保样式能兼容不同长度的文本。</p>
</div>

步骤2：编写CSS样式 #

这部分是实现自定义效果的核心，你可以根据需求修改颜色、圆角、阴影这些属性：

/* 文本容器的基础样式 */
.custom-text-block {
  /* 布局控制 */
  width: 75%;
  max-width: 650px;
  margin: 2.5rem auto;
  padding: 1.8rem;
  /* 视觉美化 */
  background-color: #f0f4f8;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  border-top: 5px solid #2563eb;
  /* 文本排版 */
  font-family: 'Arial', sans-serif;
  line-height: 1.7;
}

/* 标题样式 */
.custom-text-block h4 {
  margin-top: 0;
  color: #2563eb;
  font-size: 1.4rem;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 0.6rem;
}

/* 正文文本样式 */
.custom-text-block p {
  color: #334155;
  margin-bottom: 1.2rem;
}

/* 强调文本的强化样式（可选） */
.custom-text-block p strong {
  color: #dc2626;
  font-weight: 600;
}

/* 代码片段的样式（可选） */
.custom-text-block p code {
  background-color: #e2e8f0;
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  font-family: 'Courier New', monospace;
}

按需自定义调整方向 #

如果你想要其他风格的样式，可以针对性修改：

• 复古打字机风格：换成等宽字体，添加光标闪烁动画（用CSS @keyframes 实现）
• 手写风格：改用手写字体，调大行距和字间距
• 渐变背景：把background-color替换成background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)这类渐变值

提示：如果你的目标样式有特殊需求（比如竖排文字、首字下沉），可以补充具体细节，我再帮你调整代码~

内容的提问来源于stack exchange，提问作者pa1.Shetty