Как использовать динамический текст-заменитель при переполнении текста?

Question

Если у меня есть три строки текста, известные во время загрузки страницы (но не во время разработки), таких как:

1. Полный текст может быть несколько долго.
2. Частичный текст короче.
3. Крошечный текст.

Как разместить текст в каком-либо элементе HTML (div или span в порядке) без каких-либо обертываний, когда пользователь выполняет какое-либо действие, которое изменяет размер элемента HTML, что самый длинный текст предпочтительнее, но если текст переполняется, переключается на следующий короткий текст, который не переполняется? Изменение размера меньше, чем самый маленький текст, скроет любое переполнение (т. Е. Элемент HTML будет иметь переполнение: скрыто).

Answer 1

Вы не можете сделать это с помощью CSS. Используйте JavaScript и пропустите все версии. Оставьте тот, который подходит. Вы можете измерить высоту div, чтобы определить, подходит ли текст.

EDIT (добавлен пример):

HTML

<div class="ft" data-sh="{{ short-text }} data-tn=" {{ tiny-text }}">{{ long-text }}</div> 

JQuery

function fits(ele) { 
    var cur_height = ele.height(); 
    ele.css('white-space', 'nowrap'); 
    var obl_height = ele.height(); 
    return cur_height == obl_height; 
} 

$(function(){ 

    $('.ft').each(function() { 

     if(! fits($(this)) { 

     $(this).html($(this).data('sh'); 

     if(! fits($(this)) { 

      $(this).html($(this).data('tn'); 
     } 
     } 
    }) 
}); 

Это может быть написано лучше, но я надеюсь, что это даст вам идею. Не испытано.

Answer 2

Вы не указали какой-либо HTML-код, но вот рабочая версия с jQuery для такого типа структуры HTML.

JSFiddle

HTML:

<div class="mydiv"> 
    <p class="large">I am a paragraph</p> 

    <p class="med">I am a paragraph</p> 

    <p class="small">I am a paragraph</p> 
</div> 

CSS:

.mydiv { 
    width: 50px; 
    height: 50px; 
    border: 1px solid black; 
} 

.med { 
    font-size: .8em; 
} 

.small { 
    font-size: .2em; 
} 

.mydiv p { 
    display: none; 
} 

p.large { 
    display: block; 
} 

JQuery:

$('.mydiv').children('p').each(function(i, el) { 
    if (this.scrollWidth > $(el).innerWidth()) { 
     $(el).css('display', 'none'); 
     $(el).next('p').css('display', 'block'); 
    } 
}); 

Answer 3

Вы можете сделать это с помощью CSS, пока вы готовы ограничить высоту. Поскольку вам нужна только 1 строка текста, ограничение высоты на, например, 1em не кажется необоснованным ограничением.

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

1. Элемент выключателя шириной 1px. К сожалению, этот элемент должен иметь некоторую ширину, чтобы участвовать в потоке в соответствии с моим тестированием.
2. Текст для отображения.

Текст должен быть самым коротким и длинным и не должен иметь прозрачный фон.Использование прозрачного фона позволило бы более короткому тексту.

.container { 
 
    white-space: nowrap; 
 
    height: 1em; /* Must be fixed height */ 
 
    width: 100%; /* Or any width you want */ 
 
    overflow: hidden; /* Make sure that the elements that are bumped down don't show */ 
 
    border: 1px solid red; /* For example only */ 
 
} 
 

 
.container p { 
 
    position: relative; /* Relative to allow shifting elements up */ 
 
    float: left; 
 
    left: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 1em; /* Text block must be fixed height */ 
 
    background-color: white; /* Text block must be opaque */ 
 
} 
 

 
.container .break { 
 
    float: left; 
 
    clear: left; 
 
    width: 1px; 
 
    height: 1em; /* Must be the same height as a text block */ 
 
} 
 

 
/* Shift each longer text block up to sit atop the first one */ 
 
.container p:nth-child(4) { 
 
    top: -1em; 
 
} 
 
.container p:nth-child(6) { 
 
    top: -2em; 
 
} 
 

 

 
/* Code below is just to animate the width for the sake of this example, and is not part of the solution */ 
 
@keyframes changewidth { 
 
    from { width: 100%; } 
 
    to { width: 1%; } 
 
} 
 

 
.container { 
 
    animation-duration: 5s; 
 
    animation-name: changewidth; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
}

<div class="container"> 
 
    <div class="break"></div> 
 
    <p>Short summary</p> 
 
    <div class="break"></div> 
 
    <p>This is a shorter version of the summary text.</p> 
 
    <div class="break"></div> 
 
    <p>This is a really long version of the summary text. I could go on forever. Isn't this great?</p> 
 
</div>