如果必须，将文本的特定部分移动到下一行答案

【问题标题】：Move a specific part of text to next line if it have to如果必须，将文本的特定部分移动到下一行
【发布时间】：2021-09-23 05:02:08
【问题描述】：

我正在尝试在一行中查看名称和评分值以及星号，但我在考虑如果名称大于星号并且评分必须集体移动到下一行但在我的情况下它首先评分移动那么star，是否有任何可能的解决方案，如果移动到下一行，那么star和评级值都

喜欢
```
Abdul* 4.5
```
如果得到更多则
```
Abdul Wahab
*4.5
```
如果更大那么
```
Abdul Wahab 
amir   *4.5
```

<p className="Bold mb-0 FS_16 Black" style={{fontSize: "100%"}}> Any name
  <span>
    <img src={Star} alt="" className="mb-2 p-1" />
    <span className="Bold FS_16" style={{ color: "yellow" }}>{props.Rating}</span>
  </span>
</p>

【问题讨论】：

添加 <wbr> 你希望文本中断的地方
只是我的 2 美分。从用户体验的角度来看，选项 3 看起来很糟糕

标签： html css reactjs frontend

【解决方案1】：

如果移动到下一行，那么星级和评分值都

看起来你只需要你的评级是实心块，所以，你可以强制它是实心的

<p className="Bold mb-0 FS_16 Black" style={{fontSize: "100%"}}> Any name
  <span className="rating">
    <img src={Star} alt="" className="mb-2 p-1" />
    <span className="Bold FS_16" style={{ color: "yellow" }}>{props.Rating}</span>
  </span>
</p>

.rating {
  display: inline-block
}

或者您可以使用display: inline-flex 或任何更适合您当前布局和样式的东西。您也可以发布您的 CSS，这样会更容易帮助您

【讨论】：

【解决方案2】：

p 元素是一个 block 元素，它覆盖了其容器的整个宽度，并在其主体中添加了一个 inline 框，可以放置内联元素。 span 和 img 元素是内联元素。内联元素需要换行，您可以将内联元素相互放置。

解决方案：将不希望换行的内容部分包裹在span 中，并将其css 属性white-space 设置为nobreak。然后，此内容将永远不会换行，但整个包装 span，被视为其周围的复合 inline 元素，相对于周围框中的其他内容可能仍会中断。

检查我的原始但有意义的样本，并验证星号和评级从未用换行符分隔。

.container { text-align: center; background-color: lightgreen; border: 1px solid black; }
.w25 { width: 25px; }
.w50 { width: 50px; }
.w100 { width: 100px; }
.w150 { width: 150px; }
.w200 { width: 200px; }
.nobreak { white-space: nowrap }

<html>
  <body>

    <div class="container w25">
      <p>
        <span>This is a name</span>
        <span class="nobreak">
          <span>&star;</span>
          <span>4.5</span>
        </span>
      </p>
    </div>
    
    <div class="container w50">
      <p>
        <span>This is a name</span>
        <span class="nobreak">
          <span>&star;</span>
          <span>4.5</span>
        </span>
      </p>
    </div>
    
    <div class="container w100">
      <p>
        <span>This is a name</span>
        <span class="nobreak">
          <span>&star;</span>
          <span>4.5</span>
        </span>
      </p>
    </div>
    
   <div class="container w150">
      <p>
        <span>This is a name</span>
        <span class="nobreak">
          <span>&star;</span>
          <span>4.5</span>
        </span>
      </p>
    </div>
    
    <div class="container w200">
      <p>
        <span>This is a name</span>
        <span class="nobreak">
          <span>&star;</span>
          <span>4.5</span>
        </span>
      </p>
    </div>
    
  </body>
</html>

【讨论】：