text-overflow: ellipsis; не до конца обрезает текст

Question

нужно реализовать ломания текста, чтобы при уменьшении экрана, те буквы, что в конце текста делались точечками ' ... '. Я добавил все свойства что нужно, и оно вроди как работает, но там буквально пару букв становиться точками, а дальше оно уже не хочет ломаться, и просто уходит за экран.

Блок називаеться mail__column-text

ссылка на codepan

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    text-decoration: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.wrapper {
    min-height: 100%;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

.title {
    font-size: 66px;
    line-height: 72px;
    font-weight: bold;
}

.section {
    margin-bottom: 150px;
}

.button {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 5px;
    text-align: center;
    background: linear-gradient(180deg, #ffd237 0%, #b4962f 100%);
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

.button:hover {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.button:hover a {
    color: #fff;
}

.button a {
    -webkit-transform: rotate(-0.07deg);
    transform: rotate(-0.07deg);
    font-weight: 600;
    font-size: 18px;
    line-height: 32px;
    color: #000;
    transition: 0.2s;
}

.paragraph {
    margin-bottom: 40px;
}

.input {
    background: #ffffff;
    border-radius: 5px;
    border: none;
    font-size: 14px;
    line-height: 50px;
    color: #9c9c9c;
    padding-right: 20px;
}

.input:focus, .input:active {
    outline: none;
}

body {
    font-family: sans-serif;
    background-color: #f5f5f5;
}

.header {
    padding: 30px;
    border-bottom: 3px solid gray;
}

.header__row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.header__logo {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    font-size: 32px;
}

.header__logo img {
    max-width: 50px;
}

.header__account {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
}

.header__account span {
    color: #000;
    font-weight: bold;
}

.header__account img {
    max-width: 50px;
}

.mail__row {
    display: grid;
    grid-template-columns: 200px 1fr;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
}

.mail__nav ul li {
    padding: 10px 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
}

.mail__nav ul li:hover {
    background-color: #f4e4e4;
    cursor: pointer;
}

.mail__nav ul li a {
    color: #000;
}

.mail__nav-item--active {
    background-color: #f4e4e4;
}

.mail__column-message {
    position: relative;
    display: grid;
    grid-template-columns: 200px 1fr;
    padding: 15px 40px 15px 5px;
    border-bottom: 1px solid #000;
}

.mail__column-name {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
}

.mail__column-name img {
    max-width: 20px;
}

.mail__column-describe {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}

.mail__column-describe h2 {
    font-weight: bold;
    white-space: nowrap;
}

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

.mail__column-date {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    margin-left: auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.mail__column-date img {
    -ms-flex: 0 0 20px;
    flex: 0 0 20px;
}

.mail__column-date span {
    white-space: nowrap;
}

 <section class="mail">
            <div class="mail__row">
               <div class="mail__column">
                  <nav class="mail__nav">
                     <ul>
                        <li class="mail__nav-item mail__nav-item--active"> <img src="./assets/images/incom.png"
                              alt="incom">
                           <a href="#">Incoming</a>
                        </li>
                        <li class="mail__nav-item "> <img src="./assets/images/outcom.png" alt="outcom"> <a
                              href="#">Outgoing</a>
                        </li>
                        <li class="mail__nav-item "> <img src="./assets/images/draft.png" alt="draft"> <a
                              href="#">Drafts</a>
                        </li>
                        <li class="mail__nav-item "> <img src="./assets/images/spam.png" alt="spam"> <a
                              href="#">Spam</a></li>
                     </ul>
                  </nav>
               </div>
               <div class="mail__column">
                  <div class="mail__column-message">
                     <div class="mail__column-name">
                        <img src="./assets/images/star1.svg" alt="star">
                        <span>Me, Alex</span>
                     </div>
                     <div class="mail__column-describe">
                        <h2>Trip to qwqSouth America</h2>
                        <div class="mail__column-text"> -
                           qqwwqqq Susut d otwqeq
                        </div>
                        <div class="mail__column-date">
                           <img src="./assets/images/attach_26.png" alt="attach">
                           <span>12 apr.</span>
                        </div>
                     </div>
                  </div>
                  <div class="mail__column-message">
                     <div class="mail__column-name">
                        <img src="./assets/images/star1.svg" alt="star">
                        <span>Me, Alex</span>
                     </div>
                     <div class="mail__column-describe">
                        <h2>Trip to South America</h2>
                        <div class="mail__column-text">
                           - qqqSuspendisse ut dot
                        </div>
                        <div class="mail__column-date">
                           <img src="./assets/images/attach_26.png" alt="attach">
                           <span>12 apr.</span>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </section>

Answer 1

но там буквально пару букв становиться точками, а дальше оно уже не хочет ломаться, и просто уходит за экран.

Как понять "дальше не хочет ломаться"? Вы понимаете что вообще делает css-свойство text-overflow: ellipsis? Если текст не помещается в заданную область, то он обрезается и к концу видимой строки добавляется многоточие. Если я правильно понимаю, то вы хотите контролировать видимую длину текста, но вы не сможете это сделать стандартными средствами html. Для этого вам надо либо js, либо php использовать.

БЛОГ НА HUSL

text-overflow: ellipsis; не до конца обрезает текст

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