在html页面开发过程中，将两行文字放在一起展示是经常遇到的布局需求，不同的实现方式适用于不同的场景，下面介绍几种常用的实现方案。
使用行内元素实现
html中的行内元素默认会在同一行内排列，我们可以将两行文字分别放在行内元素中，这样它们就会自然排在同一行。常见的行内元素有<span>、<em>、<strong>等。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>行内元素实现</title>
</head>
<body>
<span>第一行文字</span>
<span>第二行文字</span>
</body>
</html>
使用flex布局实现
flex布局是现代前端开发中常用的布局方式，通过将父容器设置为flex容器，内部的子元素会默认沿水平方向排列，非常适合实现多行文字放在同一行的需求。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>flex布局实现</title>
<style>
.flex-container {
display: flex;
/* 可选：设置子元素垂直居中 */
align-items: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div>第一行文字</div>
<div>第二行文字</div>
</div>
</body>
</html>
调整line-height实现
如果两行文字是放在同一个块级元素中，我们可以通过调整line-height属性，让两行文字的行高减小，从而在视觉上看起来是紧密放在一起的效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>调整line-height实现</title>
<style>
.text-box {
line-height: 1.2;
/* 设置固定高度让两行文字更紧凑 */
height: 40px;
}
</style>
</head>
<body>
<div class="text-box">
第一行文字<br>
第二行文字
</div>
</body>
</html>
使用浮动属性实现
给两个文本元素设置浮动属性，也可以让它们排列在同一行，不过使用浮动后需要注意清除浮动，避免影响后续元素的布局。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>浮动实现</title>
<style>
.float-left {
float: left;
margin-right: 10px;
}
/* 清除浮动 */
.clear-float::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="clear-float">
<div class="float-left">第一行文字</div>
<div class="float-left">第二行文字</div>
</div>
</body>
</html>
不同方案对比
下面通过表格对比几种方案的适用场景和优缺点：
| 实现方案 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| 行内元素 | 简单文本同行展示 | 实现简单，无需额外样式 | 布局灵活性较低 |
| flex布局 | 复杂布局场景 | 布局灵活，对齐方式易控制 | 旧版本浏览器兼容性稍差 |
| 调整line-height | 同一容器内多行文本紧凑展示 | 无需额外嵌套元素 | 仅适用于同一容器内的文本 |
| 浮动属性 | 传统布局场景 | 兼容性好 | 需要手动清除浮动，易引发布局问题 |
开发者可以根据实际的页面需求和浏览器兼容要求，选择最合适的方案来实现两行字放在一起的效果。
html文本布局css_flexline-heightdisplay属性修改时间：2026-07-02 15:42:19