Без JavaScript, могу ли я показать другой текст, если более длинный не подходит?

Ответ 1

Есть способ... любопытный...

.box {
  width: 100px;
  height: 18px;
  background-color: yellow;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}

span {  position: absolute; bottom: 0; left: 0; width: 100%; max-height: 36px;  }
em { position: absolute; width: 100%; top: 18px; left: 0; background-color: yellow; }

<div class="box">
   <span> 
     This text fits
     <em>fallback text</em>
   </span>
</div>

<div class="box">
   <span> 
     Huge text that doesn't fit and it more than 3 lines. Lorem ipsum dolor sit amet, consectetur adipisicing 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 in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     <em>fallback text</em>
   </span>
</div>

<div class="box">
   <span> 
     This text doesn't fit
     <em>fallback text</em>
   </span>
</div>

Ответ 2

Я сделал что-то подобное, используя overflow:hidden и плавающий divs.

<div style="overflow:hidden;height:1.2em;">
  <div style="float:left">Rudolph</div>
  <div style="float:right">Raspe</div>
  Erich
</div>

Ответ 3

Я получал удовольствие от однолинейного решения, я понимаю, что многолинейное решение может быть лучше подходит для OP. Я просто торчаю здесь, если это полезно для всех. Я быстро проверил последние версии Firefox, Chrome, IE и Edge, и, похоже, он работает повсюду. Я добавил в пример некоторые фиксированные поля ширины, но он также работает с динамической шириной окна.

div {
  position: relative;
  overflow: hidden;
  line-height: 1.2em;
  height: 1.2em;
  /* extraneous CSS added for sample clarity only */
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;
  font-size: 13px;
  margin: 3px;  
}

div > span {
  background-color: #EFF0F1;
  float: left;
}

div::before {
  content: "\00a0";
}

div::after {
  content: attr(title);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: #EFF0F1;
}

<div title="Rudolf E. Raspe">
  <span>Rudolf Erich Raspe</span>
</div>
<div title="Baron Munchausen">
  <span>Hieronymus Karl Friedrich von Munchhausen</span>
</div>
<div title="Rudolf E. Raspe" style="width:400px;">
  <span>Rudolf Erich Raspe</span>
</div>
<div title="Baron Munchausen" style="width:400px;">
  <span>Hieronymus Karl Friedrich von Munchhausen</span>
</div>
<div title="Rudolf E. Raspe" style="width:200px;">
  <span>Rudolf Erich Raspe</span>
</div>
<div title="Baron Munchausen" style="width:200px;">
  <span>Hieronymus Karl Friedrich von Munchhausen</span>
</div>
<div title="Rudolf E. Raspe" style="width:120px;">
  <span>Rudolf Erich Raspe</span>
</div>
<div title="Baron Munchausen" style="width:120px;">
  <span>Hieronymus Karl Friedrich von Munchhausen</span>
</div>

Ответ 4

Чистое решение для CSS:

Использование:

<div class="box" data-shortname="Baron Munchausen">
    Hieronymus Karl Friedrich von Munchhausen
</div>

На протяжении веков я пытался что-то сделать, используя box::after и z-index:

box {
    position: relative;
    display: block;
    width: 120px;
    height: 40px;
    background-color: yellow;
    overflow: hidden;
    z-index: 0;
}

box::after {
    content: attr(data-shortname);
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    background-color: yellow;
    z-index: 1;
}

Я пришел с пустыми руками - хотя вы могли использовать @media query с настройкой выше, чтобы применить положительный или отрицательный z-index to box::after.

(Если значение box::after z-index положительное, отображается краткое имя, в противном случае отображается более длинное имя.)

Решение для JavaScript:

Итак, вот решение на основе JavaScript, использующее data-* в конце концов:

var boxes = document.getElementsByClassName('box');

for (var i = 0; i < boxes.length; i++) {
    if (boxes[i].textContent.length > 20) {
        boxes[i].textContent = boxes[i].dataset.shortname;
    }
}

.box {
    position: relative;
    width: 120px;
    height: 40px;
    background-color: yellow;
    margin-bottom: 12px;
}

<div class="box" data-shortname="Rudolf E. Raspe">
    Rudolf Erich Raspe
</div>

<div class="box" data-shortname="Baron Munchausen">
    Hieronymus Karl Friedrich von Munchhausen
</div>

Ответ 5

Я знаю, что это не истинный ответ, а скорее альтернатива. Есть ли причина, по которой вы не можете использовать переполнение текста?

.box span {
    text-overflow: ellipsis; 
    white-space: nowrap;
    overflow: hidden;
}

Полезная ссылка:

https://css-tricks.com/almanac/properties/t/text-overflow/

Ответ 6

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

Если вы можете определить согласованный размер экрана, по которому вы собираетесь переходить от короткого к длинному, вы можете использовать атрибуты data- и CSS content вместе с запросами @media.

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

<div class="box">
  <p class="text-container" data-short-version="Rudolf E. Raspe" data-long-version="Rudolf Erich Raspe"></p>
  <p class="text-container" data-short-version="Baron Munchausen" data-long-version="Hieronymus Karl Friedrich von Munchhausen"></p>
</div>

.text-container:before {
  content:attr(data-short-version);}

.text-container {  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size:40px;
  margin:0px;}

@media screen and (min-width:600px) {
  .text-container:before {
    content:attr(data-long-version);
  }
}

Пример здесь: http://codepen.io/ryantdecker/pen/wWPJNA