仅限CSS:当在句子的某个位置换行时,

fhity93d  于 2023-01-14  发布在  其他
关注(0)|答案(2)|浏览(122)

你会看到一个以特定分辨率居中的句子:

在较小的屏幕中,您可以看到第一个换行符:

我想要的结果:如果有第一个换行符,那么它应该发生在某个位置,例如:

我可以用CSS单独的解决方案实现吗?

    • 代码端示例:**

https://codepen.io/webia1/full/zYrdXoZ
HTML和CSS部分非常简单:

<div class="cTextContainer">
  Furl hands Pieces of Eight red 
  ensign parley lookout dance the 
  hempen jig chase guns main 
  sheet jolly boat. 
</div>
.cTextContainer {
  padding: 30px;
  text-align: center;
  font-size: 24px;
  margin: auto;
  border: 1px solid red;
}

以下情况可能不会发生:

它始终是一个期望的结果,类似于:

    • 请考虑:**在真实的例子中(一个复杂的场景,在这里解释太费时间了),我使用vwvh来缩放字体大小。我希望保证在每种可能的分辨率下(从移动到大屏幕)都有相似的外观。
    • 编辑:我想象这样的情景:移动50%(2行)或33%(3行等)的文本在下一行后或前的话。我目前的变通办法是改变框宽相对于屏幕宽度在许多媒体查询。**
lc8prwob

lc8prwob1#

你可以使用媒体查询来解决这类问题。请找到下面的代码,我认为它会帮助你解决你的问题。

<div class="cTextContainer">
       Furl hands Pieces of Eight red 
  ensign parley lookout dance <br>the 
  hempen jig chase guns main 
  sheet jolly boat.
</div>

.cTextContainer {
  padding: 30px;
  text-align: center;
  font-size: 24px;
  margin: auto;
  border: 1px solid red;
}     
@media screen and (min-width: 700px) 
{
  .cTextContainer br 
  {
    display: none;
  }
}
i2byvkas

i2byvkas2#

您可以只在您想要中断文本的地方使用常规空格,在所有其他地方使用非中断空格()。 ).
例如:

my&nbsp;long&nbsp;text&nbsp;breaks&nbsp;here another&nbsp;line&nbsp;started

对我有用

相关问题