Как заставить два встроенных элемента обернуться

Question

У меня следующая проблема: Это HTML:

<div>
    <a href="x">Link text can also be long</a>
    <button class="xx"></button>
</div>

Я хочу, чтобы два элемента в div (a и кнопка) всегда располагались рядом друг с другом.

ВВ тот момент, когда я изменяю размер окна и не хватает места для обоих элементов, кнопка оборачивается, строка находится в 1., кнопка в 2. Что я хочу, часть текста (тег a) также может предварительно-ворачивать с помощью кнопки, чтобы кнопка никогда не была одинокой в ​​2. строке.

Как я могу это сделать?Я играл с пробелом: nowrap .. но пока безуспешно.

Редактировать: используя display flex на div:

Что я хочу:

Чего я не хочу:

Answer 1

Вы не можете сделать это с чистым css, поэтому должны получить помощь javascript.

.spanWrap { display: inline-block; }

a { text-decoration: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <a href="x">Link text can also be long Link text can also be Link text can also be long Link text can also be</a>
  <button class="xx">Button</button>
  <script type="text/javascript">
    $(document).ready(function(){
      var copyStr = $('a[href=x]').text();
      var tempStr = copyStr.substring(0, copyStr.lastIndexOf(" "));
      var last_word_arr = copyStr.split(" ");
      var last_word = last_word_arr[last_word_arr.length - 1];
      $('a[href=x]').text(tempStr);
      $('.xx').wrap('<span class="spanWrap"><a href="x">' + last_word +' </a></span>');
    })   	
  </script>
</div>

Примечание: измените размер браузера и просмотрите результат.

Answer 2

Вы можете сделать это чисто CSS , если немного измените структуру и обернуть последнее гиперссылку слово с button и display обертка элемент as inline-block:

button {border-radius: 50%}

div {
  width: 350px;
  border: 1px solid;
  animation: width 3s linear infinite alternate;
}

.common {display: inline-block}

@keyframes width {
  to {width: 100px}
}

<div>
  <a href="x">Yes this is a very long text but it </a>
  <span class="common"><a href="x">helps</a> <button class="xx">i</button></span>
</div>

Answer 3

Надеюсь, это сработает для вас.

a span{
  display: inline-block;
}

<a href="x">Link text can also be <span>long <button class="xx">i</button></span></a>