Предотвращение сокращения ширины элемента

Question

У меня есть подсказка с некоторым текстом, и для того, чтобы контролировать положение всплывающей подсказки относительно курсора с помощью CSS, я поместил его в div с нулевым размером. Javascript перемещает внешний div, и всплывающая подсказка может быть выровнена с помощью любого из атрибутов верхнего/правого/левого/нижнего уровня, в зависимости от того, на какой стороне он должен быть установлен.

Однако это создает новую проблему - содержимое всплывающей подсказки теперь используется как можно меньше ширины. Я не могу отключить wordwrap, потому что он должен поместиться на мобильных экранах. Без внешнего контейнера он отлично работает, растягиваясь до края окна. Есть ли способ игнорировать внешний контейнер при расчете разрывов строк?

Из того, что я могу сказать, всплывающая подсказка больше не «видит» элемент тела, поэтому он не может знать, сколько он может растянуться. Тем не менее, управление позицией всплывающей подсказки непосредственно через Javascript более сложно, если мне нужно выровнять нижнюю или правую стороны - мне нужно либо рассмотреть размер всплывающей подсказки (который может меняться в зависимости от его положения), либо установить свойства bottom/right и рассмотреть размер окна ,

Вот пример: http://jsfiddle.net/03gdomLt/1/
Первая всплывающая подсказка работает правильно, а вторая пытается свернуть до нулевой ширины.

.tip-outer { 
    position: absolute; 
    top: 200px; 
    left: 100px; 
} 
.tooltip { 
    position: absolute; 
    left: 10px; 
    top: 10px; 
    border: 1px solid black; 
} 

<div class="tip-outer"> 
    <div class="tooltip"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra feugiat augue, non pretium massa ultricies vel. In hendrerit tellus. 
    </div> 
</div> 
<div class="tooltip"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra feugiat augue, non pretium massa ultricies vel. In hendrerit tellus. 
</div> 

Answer 1

Похоже, что только ширина родительского сжимается до 0, текст всплывающей подсказки по-прежнему присутствует, но не может быть помещен на экран. Это связано с тем, что родительский div (tip-outer) имеет left:100px, который заставляет всплывающую подсказку сдвигаться вправо, следовательно, не видно.

Попробуйте ниже css, чтобы исправить его для небольшого экрана. Updated fiddle

@media only screen 
and (max-width : 400px) { 
    .tip-outer .tooltip{ 
     left: -90px; 
    } 
} 

Answer 2

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

http://jsfiddle.net/03gdomLt/3/

.tip-outer { 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 100px; 
 
} 
 
.tooltip { 
 
    position: relative; 
 
    left: 10px; 
 
    top: 10px; 
 
    border: 1px solid black; 
 
    //white-space: pre-wrap; 
 
}

<div class="tip-outer"> 
 
    <div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
Suspendisse accumsan lectus eget egestas fringilla.</div> 
 
</div> 
 
<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
Suspendisse accumsan lectus eget egestas fringilla.</div>