Блог

У меня ограниченная область ( width: 200px ) для отображения полного имени. Я должен следовать такой html-конструкции (два пролета внутри DIV):

 .fullName {
  width: 200px;
  border: 1px solid red; 
  overflow: hidden;
  text-overflow: ellipsis;
}  

 <div class="fullName">
  <span class="firstName">
    AlbertAlbertAlbertAlbertAlbertAlbertAlbertAlbert
  </span>
  <span class="lastName">
    EinsteinEinsteinEinsteinEinsteinEinsteinEinstein
  </span>
</div>  

Ожидаемое поведение:

1. имена и фамилии не слишком длинные — должны отображаться в одной строке.
2. имена и фамилии достаточно длинные (но менее 200 пикселей для каждого) — должны отображаться в двух строках
3. одно из имен занимает менее 200 пикселей, другое — более 200 пикселей — должно отображаться в двух строках со ... знаком -в конце строки с самым длинным именем
4. оба имени занимают более 200 пикселей каждое — должны отображаться в двух строках со ... знаками — в конце строк

Как вы можете видеть, приведенный выше код соответствует всем ожиданиям в Chrome и Firefox. Однако он не работает должным образом в IE — он просто обрезает 2-ю строку без добавления ... знака.

Предпочтительно чистое CSS-решение. У меня есть JS-решение, но моя команда настаивает на чистом CSS-решении для решения небольшой проблемы.

Для того text-overflow: ellipsis; , чтобы элемент работал, он должен установить флажок — быть или display:block или display:inline-block , попробуйте это:

И <span> display:inline по умолчанию имеет.

 .fullName {border: 1px solid blue; width:50%}

.fullName > span {
  max-width:100%;
  border: 1px solid red; 
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}  

 <div class="fullName">
  <span class="firstName">
    AlbertAlbertAlbertAlbertAlbertAlbertAlbertAlbert
  </span>
  <span class="lastName">
    EinsteinEinsteinEinsteinEinsteinEinsteinEinstein
  </span>
</div>