Fit содержание текста с многоточием

Question

У меня есть и HTML контейнер как

<div class="container"> 
    <p> 
    <span>short text width random length comes here</span> 
    <a>postedByUserName</a> 
    </p> 
</div> 

контейнер должен быть отзывчивым, есть рабочая демо здесь

var $input = $('.input input'), 
 
$container = $('.container'), 
 
$value = $('.value'); 
 
$value.text('Container width: ' + $input.val() + 'px'); 
 
$container.width($input.val()); 
 

 
$input.on('input', function(){ 
 
\t $container.width($input.val()); 
 
    $value.text('Container width: ' + $input.val() + 'px'); 
 
});

.main{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background: bisque; 
 
    padding: 5px; 
 
} 
 
.container { 
 
    overflow: hidden; 
 
    max-height: 80px; 
 
    padding: 0; 
 
} 
 
    p { 
 
    background: orange; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    } 
 
    a { 
 
     color: blue; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="input"> 
 
    Min. 50px 
 
    <input type="range" min="50" max="600" step="10" name="container_width"> 
 
    Max: 600px 
 
    <br/> 
 
    <div class="value"></div> 
 
    <br/> 
 
    </div> 
 
    <div class="container"> 
 
    <p> 
 
     <span>Some random text comes here</span> 
 
     <a>postedByUserName</a> 
 
    </p> 
 
    </div> 
 
</div>

если вы установите ширину от контейнера до 100px (вход диапазона может использоваться) вы увидите, что элемент связи w Имя пользователя больше не отображается. Как я могу сделать, чтобы не поместить ссылку на следующую строку, но показывая элемент текста непрерывно и показывая имя пользователя с эллипсисом, это должно произойти только тогда, когда высота контейнера составляет 80 пикселей, до тех пор, пока эллипсис не будет применен к тексту , Шаблон внутри div.container можно изменить, но имя пользователя должно выглядеть как ссылка и должно быть интерактивным элементом? Мне нужно решение CSS + HTML.

Answer 1

Добавить код ниже вашего p.

overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 

Explaination:

1. overflow: hidden;: Скрывает символы за пределами заданной ширины.
2. white-space: nowrap;: Скажите браузеру, чтобы он не разбивал текст на несколько строк.
3. text-overflow: ellipsis;: Создает многоточие при переполнении текста.

---

Обновлено Отрывок:

var $input = $('.input input'), 
 
    $container = $('.container'), 
 
    $value = $('.value'); 
 
$value.text('Container width: ' + $input.val() + 'px'); 
 
$container.width($input.val()); 
 

 
$input.on('input', function() { 
 
    $container.width($input.val()); 
 
    $value.text('Container width: ' + $input.val() + 'px'); 
 
});

.main { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: bisque; 
 
    padding: 5px; 
 
} 
 
.container { 
 
    overflow: hidden; 
 
    max-height: 80px; 
 
    padding: 0; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 
p { 
 
    background: orange; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 
a { 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="input"> 
 
    Min. 50px 
 
    <input type="range" min="50" max="600" step="10" name="container_width">Max: 600px 
 
    <br/> 
 
    <div class="value"></div> 
 
    <br/> 
 
    </div> 
 
    <div class="container"> 
 
    <p> 
 
     <span>Some random text comes here</span> 
 
     <a>postedByUserName</a> 
 
    </p> 
 
    </div> 
 
</div>

Answer 2

Я играл код вокруг. Пожалуйста, попробуйте проверить это немного,

<div class="container" style="text-overflow: ellipsis; width: 190px; white-space: nowrap; overflow: hidden;"> 
    <div style="text-overflow: ellipsis; width: 100%; white-space: nowrap; overflow: hidden;"> 
    <span>Some random text comes here</span> 
    <a>postedByUserName</a> 
    </div> 
</div>