Как сократить текст без дочернего блока

Question

.eps {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.likes {
  width: 50px;
  display: flex;
  gap: 5px;
  flex-direction: row;
  align-items: center;
}
.likes::before {
width: 19px;
height: 19px;
content: url("data:image/svg+xml;base64,PHN2ZyB0cmFuc2Zvcm09InNjYWxlKDEsLTEpIiB2aWV3Qm94PSIwIDAgNSA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTSA0Ljc5MTM1MTksMy4wMjQ0NjY0IEEgMC4yMDc3NDM5OSwwLjIzMjMzNTMzIDAuMjAwMjI2ODYgMCAwIDUuMDAxMDY3OSwyLjc5MjgzOTMgTCA1LjAxNTYxNjksMC4yMzg0NDk4MiBBIDAuMjA3NzQzOTksMC4yMzIzMzUzMyAwLjIwMDIyNjg2IDAgMCA0LjgwODU1NDYsMC4wMDQyMTg4MiBMIDQuMTM0Njk3Nyw4LjgyMjQ4OGUtNiBBIDAuMjA3NzQzOTksMC4yMzIzMzUzMyAwLjIwMDIyNjg2IDAgMCAzLjkyNDk4MTcsMC4yMzE2MzU5MiBsIC0wLjAxNDU1LDIuNTU0Mzg5NDggYSAwLjIwNzc0Mzk5LDAuMjMyMzM1MzMgMC4yMDAyMjY4NiAwIDAgMC4yMDcwNjM2LDAuMjM0MjMwOSB6Ii8+PHBhdGggc3R5bGU9J29wYWNpdHk6IC41JyBkPSJtIDIuMzAyNjY4NSw0Ljk5OTc0ODUgYyAwLjAxMzA1NCwtNC45M2UtNCAwLjAyNjMwMywtMC4wMDE3OSAwLjAzODk3NCwtMC4wMDM2NyBhIDAuNDE1NDg3OTgsMC40NjQ2NzA2NyAwLjIwMDIyNjg2IDAgMCAwLjM0OTM3NSwtMC40NzM0ODAzIGMgMC4wMDM2MywtMC42Mzc5ODIyIDAuNDQ5MzIxLC0xLjMzMzk3MiAwLjg0NjgwNiwtMS42MzcwMTU0IGEgMC4xMDM4NzIwMSwwLjExNjE2NzY2IDAuMjAwMjI2ODMgMCAwIDAuMDQ1MzMsLTAuMDkzNjc0IEwgMy41OTY1NDIzLDAuNDQxMDg2NzggQSAwLjEwMzg3MjAxLDAuMTE2MTY3NjYgMC4yMDAyMjY4MyAwIDAgMy41MTM0NDM3LDAuMzI3MDM1MSBDIDMuNDM5MzcxOCwwLjMxMDU0MDg1IDMuMzcyNjk5NSwwLjI5NDI3OTI0IDMuMzA5MjE3MSwwLjI3ODc4MDIgQSAzLjU5NTg0MDgsNC4wMjE0OTIzIDAuMjAwMjI2ODUgMCAwIDIuNDU0ODYxLDAuMTYzODI0OSBMIDEuMTA1MTk5NywwLjE1NTM5MjYzIEMgMC42OTg2NTIyOSwwLjE1Mjg1MjY2IDAuNjM2MzI1NjIsMC40MDg1OTM0IDAuNjM1NDY1NDcsMC41NTk2MDg4IEEgMC40NjUzNDY1NCwwLjUyMDQzMTE1IDAuMjAwMjI2ODUgMCAwIDAuNjgyODM4OTYsMC43OTA4ODQ2NiAwLjQ2NzAwODQ5LDAuNTIyMjg5ODMgMC4yMDAyMjY4NiAwIDAgMC40NzA0ODA4LDEuNDg2NDEyMyAwLjQ2NzgzOTQ3LDAuNTIzMjE5MTggMC4yMDAyMjY4NiAwIDAgMC4yMTI2OTY1NywxLjk1MDY3NjIgMC40NjI0MzgxMiwwLjUxNzE3ODQ1IDAuMjAwMjI2ODUgMCAwIDAuMjY3NzYwMDgsMi4xOTk2MTczIDAuNTE5MzU5OTgsMC41ODA4MzgzMyAwLjIwMDIyNjg1IDAgMCAzLjkyNTY1NDJlLTYsMi43MDQ5MjU2IDAuNTE5MzU5OTgsMC41ODA4MzgzMyAwLjIwMDIyNjg1IDAgMCAwLjUxNjcwMzM1LDMuMjg3NTYxIGwgMS4zMTA3MTAxNSwwLjAwODE5IGEgMC4wNTE5MzYsMC4wNTgwODM4NCAwLjIwMDIyNjg4IDAgMSAwLjA0ODI1MywwLjA3NjY0MSAxLjgwNDA0ODgsMi4wMTc2IDAuMjAwMjI2ODUgMCAwIC0wLjExMjk0NzEsMS4wMjMwNDQzIGMgMC4xMTE5MTkyLDAuNDU3MDI4NiAwLjM0NDEyMTgsMC42MTE3MDggMC41Mzk5NDkxLDAuNjA0MzEyMiB6Ii8+PC9zdmc+")}

<div class='likes eps icon'>
  <span class='eps'>Текст текст текст текст</span>
</div>

ВОпрос в том, как сделать так, чтобы иконка была через before, не было дочернего блока span и при этом сделать так, чтобы текст сокращался, дописывалось троеточее.

Answer 1

 иконка была через before - да, 
 не было дочернего блока span - да,
 чтобы текст сокращался, дописывалось троеточее - да.

Такой результат ожидаете?

.likes {
  width: 100px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.likes::after {
  content: attr(data-title);
  background-color: #fc0;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.likes::before {
  display: block;
  left: 0;
  top: 0;
  width: 20px;
  margin-right: 5px;
  content: url("data:image/svg+xml;base64,PHN2ZyB0cmFuc2Zvcm09InNjYWxlKDEsLTEpIiB2aWV3Qm94PSIwIDAgNSA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTSA0Ljc5MTM1MTksMy4wMjQ0NjY0IEEgMC4yMDc3NDM5OSwwLjIzMjMzNTMzIDAuMjAwMjI2ODYgMCAwIDUuMDAxMDY3OSwyLjc5MjgzOTMgTCA1LjAxNTYxNjksMC4yMzg0NDk4MiBBIDAuMjA3NzQzOTksMC4yMzIzMzUzMyAwLjIwMDIyNjg2IDAgMCA0LjgwODU1NDYsMC4wMDQyMTg4MiBMIDQuMTM0Njk3Nyw4LjgyMjQ4OGUtNiBBIDAuMjA3NzQzOTksMC4yMzIzMzUzMyAwLjIwMDIyNjg2IDAgMCAzLjkyNDk4MTcsMC4yMzE2MzU5MiBsIC0wLjAxNDU1LDIuNTU0Mzg5NDggYSAwLjIwNzc0Mzk5LDAuMjMyMzM1MzMgMC4yMDAyMjY4NiAwIDAgMC4yMDcwNjM2LDAuMjM0MjMwOSB6Ii8+PHBhdGggc3R5bGU9J29wYWNpdHk6IC41JyBkPSJtIDIuMzAyNjY4NSw0Ljk5OTc0ODUgYyAwLjAxMzA1NCwtNC45M2UtNCAwLjAyNjMwMywtMC4wMDE3OSAwLjAzODk3NCwtMC4wMDM2NyBhIDAuNDE1NDg3OTgsMC40NjQ2NzA2NyAwLjIwMDIyNjg2IDAgMCAwLjM0OTM3NSwtMC40NzM0ODAzIGMgMC4wMDM2MywtMC42Mzc5ODIyIDAuNDQ5MzIxLC0xLjMzMzk3MiAwLjg0NjgwNiwtMS42MzcwMTU0IGEgMC4xMDM4NzIwMSwwLjExNjE2NzY2IDAuMjAwMjI2ODMgMCAwIDAuMDQ1MzMsLTAuMDkzNjc0IEwgMy41OTY1NDIzLDAuNDQxMDg2NzggQSAwLjEwMzg3MjAxLDAuMTE2MTY3NjYgMC4yMDAyMjY4MyAwIDAgMy41MTM0NDM3LDAuMzI3MDM1MSBDIDMuNDM5MzcxOCwwLjMxMDU0MDg1IDMuMzcyNjk5NSwwLjI5NDI3OTI0IDMuMzA5MjE3MSwwLjI3ODc4MDIgQSAzLjU5NTg0MDgsNC4wMjE0OTIzIDAuMjAwMjI2ODUgMCAwIDIuNDU0ODYxLDAuMTYzODI0OSBMIDEuMTA1MTk5NywwLjE1NTM5MjYzIEMgMC42OTg2NTIyOSwwLjE1Mjg1MjY2IDAuNjM2MzI1NjIsMC40MDg1OTM0IDAuNjM1NDY1NDcsMC41NTk2MDg4IEEgMC40NjUzNDY1NCwwLjUyMDQzMTE1IDAuMjAwMjI2ODUgMCAwIDAuNjgyODM4OTYsMC43OTA4ODQ2NiAwLjQ2NzAwODQ5LDAuNTIyMjg5ODMgMC4yMDAyMjY4NiAwIDAgMC40NzA0ODA4LDEuNDg2NDEyMyAwLjQ2NzgzOTQ3LDAuNTIzMjE5MTggMC4yMDAyMjY4NiAwIDAgMC4yMTI2OTY1NywxLjk1MDY3NjIgMC40NjI0MzgxMiwwLjUxNzE3ODQ1IDAuMjAwMjI2ODUgMCAwIDAuMjY3NzYwMDgsMi4xOTk2MTczIDAuNTE5MzU5OTgsMC41ODA4MzgzMyAwLjIwMDIyNjg1IDAgMCAzLjkyNTY1NDJlLTYsMi43MDQ5MjU2IDAuNTE5MzU5OTgsMC41ODA4MzgzMyAwLjIwMDIyNjg1IDAgMCAwLjUxNjcwMzM1LDMuMjg3NTYxIGwgMS4zMTA3MTAxNSwwLjAwODE5IGEgMC4wNTE5MzYsMC4wNTgwODM4NCAwLjIwMDIyNjg4IDAgMSAwLjA0ODI1MywwLjA3NjY0MSAxLjgwNDA0ODgsMi4wMTc2IDAuMjAwMjI2ODUgMCAwIC0wLjExMjk0NzEsMS4wMjMwNDQzIGMgMC4xMTE5MTkyLDAuNDU3MDI4NiAwLjM0NDEyMTgsMC42MTE3MDggMC41Mzk5NDkxLDAuNjA0MzEyMiB6Ii8+PC9zdmc+")
}

<div class='likes' data-title='aaaaaaaaaaaaaaaaaaaa'></div>

PS

Сделайте иконку изначально подходящего размера, или задайте размер в процентах. Для изменения цвета можно использовать фильтр

Например:

.likes {
  width: 100px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.likes::after {
  content: attr(data-title);
  background-color: #fc0;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.likes::before {
  filter: invert(1) sepia(100%) saturate(10000%) hue-rotate(45deg);
  display: block;
  left: 0;
  top: 0;
  width: 30%;
  margin-right: 5px;
  content: url("data:image/svg+xml;base64,PHN2ZyB0cmFuc2Zvcm09InNjYWxlKDEsLTEpIiB2aWV3Qm94PSIwIDAgNSA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTSA0Ljc5MTM1MTksMy4wMjQ0NjY0IEEgMC4yMDc3NDM5OSwwLjIzMjMzNTMzIDAuMjAwMjI2ODYgMCAwIDUuMDAxMDY3OSwyLjc5MjgzOTMgTCA1LjAxNTYxNjksMC4yMzg0NDk4MiBBIDAuMjA3NzQzOTksMC4yMzIzMzUzMyAwLjIwMDIyNjg2IDAgMCA0LjgwODU1NDYsMC4wMDQyMTg4MiBMIDQuMTM0Njk3Nyw4LjgyMjQ4OGUtNiBBIDAuMjA3NzQzOTksMC4yMzIzMzUzMyAwLjIwMDIyNjg2IDAgMCAzLjkyNDk4MTcsMC4yMzE2MzU5MiBsIC0wLjAxNDU1LDIuNTU0Mzg5NDggYSAwLjIwNzc0Mzk5LDAuMjMyMzM1MzMgMC4yMDAyMjY4NiAwIDAgMC4yMDcwNjM2LDAuMjM0MjMwOSB6Ii8+PHBhdGggc3R5bGU9J29wYWNpdHk6IC41JyBkPSJtIDIuMzAyNjY4NSw0Ljk5OTc0ODUgYyAwLjAxMzA1NCwtNC45M2UtNCAwLjAyNjMwMywtMC4wMDE3OSAwLjAzODk3NCwtMC4wMDM2NyBhIDAuNDE1NDg3OTgsMC40NjQ2NzA2NyAwLjIwMDIyNjg2IDAgMCAwLjM0OTM3NSwtMC40NzM0ODAzIGMgMC4wMDM2MywtMC42Mzc5ODIyIDAuNDQ5MzIxLC0xLjMzMzk3MiAwLjg0NjgwNiwtMS42MzcwMTU0IGEgMC4xMDM4NzIwMSwwLjExNjE2NzY2IDAuMjAwMjI2ODMgMCAwIDAuMDQ1MzMsLTAuMDkzNjc0IEwgMy41OTY1NDIzLDAuNDQxMDg2NzggQSAwLjEwMzg3MjAxLDAuMTE2MTY3NjYgMC4yMDAyMjY4MyAwIDAgMy41MTM0NDM3LDAuMzI3MDM1MSBDIDMuNDM5MzcxOCwwLjMxMDU0MDg1IDMuMzcyNjk5NSwwLjI5NDI3OTI0IDMuMzA5MjE3MSwwLjI3ODc4MDIgQSAzLjU5NTg0MDgsNC4wMjE0OTIzIDAuMjAwMjI2ODUgMCAwIDIuNDU0ODYxLDAuMTYzODI0OSBMIDEuMTA1MTk5NywwLjE1NTM5MjYzIEMgMC42OTg2NTIyOSwwLjE1Mjg1MjY2IDAuNjM2MzI1NjIsMC40MDg1OTM0IDAuNjM1NDY1NDcsMC41NTk2MDg4IEEgMC40NjUzNDY1NCwwLjUyMDQzMTE1IDAuMjAwMjI2ODUgMCAwIDAuNjgyODM4OTYsMC43OTA4ODQ2NiAwLjQ2NzAwODQ5LDAuNTIyMjg5ODMgMC4yMDAyMjY4NiAwIDAgMC40NzA0ODA4LDEuNDg2NDEyMyAwLjQ2NzgzOTQ3LDAuNTIzMjE5MTggMC4yMDAyMjY4NiAwIDAgMC4yMTI2OTY1NywxLjk1MDY3NjIgMC40NjI0MzgxMiwwLjUxNzE3ODQ1IDAuMjAwMjI2ODUgMCAwIDAuMjY3NzYwMDgsMi4xOTk2MTczIDAuNTE5MzU5OTgsMC41ODA4MzgzMyAwLjIwMDIyNjg1IDAgMCAzLjkyNTY1NDJlLTYsMi43MDQ5MjU2IDAuNTE5MzU5OTgsMC41ODA4MzgzMyAwLjIwMDIyNjg1IDAgMCAwLjUxNjcwMzM1LDMuMjg3NTYxIGwgMS4zMTA3MTAxNSwwLjAwODE5IGEgMC4wNTE5MzYsMC4wNTgwODM4NCAwLjIwMDIyNjg4IDAgMSAwLjA0ODI1MywwLjA3NjY0MSAxLjgwNDA0ODgsMi4wMTc2IDAuMjAwMjI2ODUgMCAwIC0wLjExMjk0NzEsMS4wMjMwNDQzIGMgMC4xMTE5MTkyLDAuNDU3MDI4NiAwLjM0NDEyMTgsMC42MTE3MDggMC41Mzk5NDkxLDAuNjA0MzEyMiB6Ii8+PC9zdmc+")
}

<div class='likes' data-title='aaaaaaaaaaaaaaaaaaaa'></div>

БЛОГ НА HUSL

Как сократить текст без дочернего блока

Ответы (1 шт):