如何用CSS实现标题末尾作者名右对齐且兼容动态内容与响应式布局

你提供的原有HTML结构不需要做任何修改，直接使用以下CSS代码即可实现要求的排版效果：

.store_detail-level1 {
  /* 容器宽度随内部内容自适应，不会撑满父级全宽 */
  display: inline-block;
  /* 适配移动端，最大宽度不超过父容器宽度 */
  max-width: 100%;
}

.book_name {
  /* 可根据设计需求调整字号、行高、字重等样式 */
  font-size: 16px;
  line-height: 1.5;
}

.author_name {
  /* 转为块级元素实现右对齐 */
  display: block;
  text-align: right;
  /* 可根据设计需求调整字号、边距等样式 */
  font-size: 14px;
  line-height: 1.5;
  margin-top: 4px;
}

/* 可选：用伪元素自动添加作者前的by前缀，不需要修改HTML内容 */
.author_name::before {
  content: "by ";
}

实现逻辑说明 #

• 外层容器设置inline-block后，宽度会由内部最长的内容（即书名折行后的实际宽度）决定，不会占满父容器的所有可用宽度
• 作者名转为块级元素后，text-align: right属性会让内容始终对齐容器的右边缘，刚好和书名的最右侧对齐，完全符合你给出的桌面端排版要求
• 自带响应式效果，不需要额外编写媒体查询：当移动端屏幕宽度不足以放下完整书名时，书名会自动折行，容器宽度会自动适配当前屏幕下书名的实际宽度，作者名也会自动对齐到折行后书名的最右边缘，和你给出的移动端排版效果完全一致
• 如果需要调整书名的折行触发阈值，只需要修改外层容器的max-width参数即可，不需要调整其他逻辑

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