将一个句子在句子中的一个确切的点上分成三行

Question

在我的网页上，我有一个单行的句子：

电气工程师和机械工程师

在某个@media (最大宽度)上，我想将文本包装成这样的3行(很明显，它将是中心的)：

电气工程师

&

机械工程师

我怎样才能用CSS做到这一点呢？

<!-- HTML -->
<h1 class="main-page-image-text">Electrical Engineer & Mechanical Engineer</h1>

/* CSS */
@media (max-width:800px) {
  .main-page-image-text h1 {
    Somehow split sentence at "&"?
}
}

Answer 1

把<span class="breakpoint"></span>放在你想休息的地方

现在为它添加css：

​

.wrapper {
  text-align: center;
}

/* Adjust to your needs */
@media (max-width: 2800px) {
  .breakpoint {
      display: block;
  }
}

<div class="wrapper">
Electrical Engineer <span class="breakpoint"></span>&<span class="breakpoint"></span> Mechanical Engineer
</div>

​

如果您想动态地使用和，那么您知道要拆分的确切短语：

​

$(document).ready(function () {
  $('.wrapper').each(function () {
    var newContent = $(this)
        .text()
        .replace('&', '<span class="breakpoint">&</span>');
    $(this).html(newContent);
  });
});

.wrapper {
  text-align: center;
}

/* Adjust to your needs */
@media (max-width: 2800px) {
  .breakpoint {
      display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
Electrical Engineer & Mechanical Engineer
</div>

​