设置文本开始换行的视口宽度

Question

我正在寻找一种在 CSS（或 JS，但最好是 CSS）中定义文本开始换行的断点的方法。我正在使用 React 17/CRA 和 CSS 模块。

我有一个包含两个内容的标题栏的 React 应用程序。左侧是h1 标记中的应用程序的三字标题。右侧是登录用户的头像和姓名，由span 中的几个元素组成。如果我缩小 viewframe，首先内容会溢出，然后，如果我进一步缩小它，应用程序的标题就会开始换行。

我希望标题在溢出发生之前换行，以便所有内容尽可能长时间地留在屏幕上。我所做的所有谷歌搜索都只提供了overflow-wrap 或word-break 的信息，这不是我想要的。文字按我想要的方式换行，我宁愿早点这样做。

我的组件的代码是：

import React from 'react'
import anonymousAvatar from './anonymousAvatar.jpg'
import styles from './dashboardHeader.module.css'

const DashboardHeader ({data}) => (
  <div className={styles.root}>
    <div className={styles.bar}>
      <span className={styles.headerContainer}>
        <h1 className={styles.header}>Three Word Title</h1>
      </span>
      <span className={styles.profile}>
        <div className={styles.profileText}>
          <p className={styles.textTop}>{data.name}</p>
          <p className={styles.textBottom}>{data.email}</p>
        </div>
        <img className={styles.avatar} src={data.image_url || anonymousAvatar} alt='User Avatar' referrerPolicy='no-referrer' />
      </span>
    </div>
  </div>
)

export default DashboardHeader

我目前拥有的 CSS 模块是：

.root {
  position: fixed;
  top: 0;
  width: 100%;
}

.bar {
  width: 100%;
  height: 64px;
  padding: 12px 16px;
  background-color: #000;
  color: #fff;
  display: flex;
  justify-content: space-between;
}

.headerContainer {
  display: grid;
  align-items: center;
}

.header {
  font-family: 'Cinzel Decorative', sans-serif;
  margin: 0;
  font-size: 1.5rem;
}

.profile {
  background-color: #000;
  border: none;
  display: grid;
  align-items: center;
  grid-template-columns: 2fr 1fr;
  max-width: 30%;
  cursor: pointer;
  margin-right: 16px;
}

.profileText {
  display: grid;
}

.textTop, .textBottom {
  font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
  font-size: 1.025rem;
  color: #fff;
  text-align: right;
  margin: auto 0;
}

.textTop {
  margin-bottom: 2px;
}

.textBottom {
  margin-top: 2px;
}

.avatar {
  height: 64px;
  width: 64px;
  border-radius: 50%;
  box-shadow: 0px 0px 12px #fff;
  margin-left: 24px;
  margin-right: 16px;
}

这是我笔记本电脑屏幕全宽的组件：

这里是中间宽度：

这里是文本最终开始换行的非常窄的宽度（注意仍有溢出）：

Answer 1

如 cmets 中所述，您可以简单地在所需断点处更改元素的宽度，如下例的顶部蓝色 div 所示。我正在使用动画来帮助您可视化结果，但您会在媒体查询断点处减小相关元素的宽度。我推荐这种方法，因为它不需要您增加 HTML 标记。

body, div, p, span {
  display: flex; justify-content: center; align-items: center;
  background-color: #eee;
  font-family: Arial;  
}
div {
  justify-content: space-between;
  transform: translateY( -5rem );
  position: absolute;
  width: 90%; height: 5rem;
  padding: 1rem;
  background-color: #222; color: #eee;
}
div, div:nth-of-type( 1 ) p:first-of-type {
  animation-name: contract; animation-duration: 5s;
  animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
div:nth-of-type( 2 ) {
  transform: translateY( 5rem );
}
@keyframes contract { 100% { width: 25%; } }
p { 
  background-color: transparent;
  text-transform: uppercase;
}
p:first-of-type {
  font-size: 1.5rem; font-weight: bold;
}
span {
  margin: 0.5rem;
  border-radius: 50%;
  width: 2.5rem; height: 2.5rem;
}

<style>
  * {
    box-sizing: border-box; padding: 0; margin: 0;
  }
  html, body {
    height: 100%;
  }
  html {
    font-size: 0.5rem;
  }
  div:nth-of-type( 1 ) p:first-of-type::before,
  div:nth-of-type( 2 ) p:first-of-type::before {
    content: 'wraps first';
    position: absolute; top: -4rem;
    border-radius: 1rem; padding: 1rem;
    background-color: #07f; white-space: nowrap;
  }
  div:nth-of-type( 2 ) p:first-of-type::before {
    content: 'wraps last';
    top: auto; bottom: -4rem;
    background-color: #f07;
  }
</style>

<div>
  <p>three word title</p>
  <p>name <br> foo@gmail.com<span></span></p>
</div>

<div>
  <p>three word title</p>
  <p>name <br> foo@gmail.com<span></span></p>
</div>

我只是使用contract 动画来手动减小第一个 div 中段落的宽度，然后它的宽度被其容器强制变小。如果这在您的特定设置中不起作用，您可以使用隐藏的 <br> 元素和 display: none，直到您想要的断点将它们设置为 block。