Нет перевода строки с двумя div

Question

Я новичок в HTML и CSS, поэтому, пожалуйста, будьте терпеливы со мной. То, чего я пытаюсь достичь, это следующее:

Lorem ipsum dolor sit amet, consitteur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, упражнение в полном объеме Duis aute irure dolor в представительстве: Нажмите на меня

При нажатии жирный текст создает всплывающее окно. Теперь вот моя проблема. Я получаю новую строку между абзацем и Нажмите на меня , что мне не нужно. Мой код выглядит следующим образом:

HTML

<div class="panel overflow-hidden">
  {{ range.Site.Params.publication.list }}
  <p class="text-dark">
    <i class="far fa-newspaper"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit: - 
    <div class="popup" onclick="myFunction()"><span style="font-weight:bold">Click on me</span>
    <span class="popuptext" id="myPopup">A Simple Popup!</span>
    </div>
  </p> 
  {{ end }}
</div>

CSS для всплывающего класса

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

Пожалуйста, помогите

Answer 1

Я не получаю ваш вопрос, но если вы хотите использовать ссылку в той же строке, вы можете сделать так:

HTML

<i class="far fa-newspaper"></i> 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  Ut enim ad minim veniam, quis nostrud exercitation ullamco 
  laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit.
<a class="popup" onclick="myFunction()"> 
<strong>Click on me</strong></a>

Здесь я только что скопировал ваш код на stackblitz.com, я надеюсь, вы поняли, вот мой код: Код:

Answer 2

Я лично думаю, что для создания диалога вам нужно создать оверлей, который занимает весь экран, а затем контейнер располагается в центре экрана. Вот демонстрационный и живой пример:

HTML

<div class="dialog-overlay">
  <div class="dialog-container">
     Your dialog content goes here!
  </div>
</div>

CSS

.dialog-overlay {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.dialog-content {
    position: absolute;
    z-index: 9999;
    top: 50%;
    left: 50%;
    opacity: 0;
    width: 94%;
    padding: 24px 20px;
}

Рабочий пример