Неправильно работает text-overflow css

Question

Всех приветствую! Есть вот такой вот код:

<div class="left-side">
    <h2 class="section-title">Новости:</h2>
    <div class="news-container">
        <a class="news-block" href="news/news_example.php">
            <div class="news-img">
                <img src="src/img/news photo.png" alt="">
            </div>
            <div class="news-content-odd">
                <div class="news-title">
                    <h3>Заголовок<span class="news-important">Важно</span></h3>
                </div>
                <div class="news-short">
                    <p>Aliquam totam tenetur fugit maiores. Aliquam qui minus suscipit ut rerum distinctio fuga veritatis. Dolorum cupiditate architecto rem iusto eligendi aperiam. Aliquam totam tenetur. Aliquam totam tenetur fugit maiores. Aliquam qui minus suscipit ut rerum distinctio fuga veritatis. Dolorum cupiditate architecto rem...</p>
                </div>
            </div>
        </a>
    </div>
</div>

.left-side {
    width: 70%;
    margin-right: 20px;
    overflow: hidden;
}

.section-title {
    font-size: 47px;
    text-align: center;
    margin: 0 0 37px 0;
}

.news-block {
    display: flex;
}

.news-img img {
    width: 547px;
    height: 307px;
    object-fit: cover;
}

.news-content-odd {
    margin: 0 0 0 20px;
}

.news-title {
    display: flex;
    align-items: baseline;
    margin: 0 0 10px 0;
    font-size: 42px;
    font-weight: 500;
}
.news-title>h3 {
    width: calc(13%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-important {
    margin: 0 0 12px 20px;
    font-size: 14px;
    color: var(--white);
    background-color: var(--red);
    padding: 1px 16px;
    border-radius: 50px;
}

.news-short {
    font-size: 24px;
    line-height: 1.6em;
    text-align: justify;
    max-height: 243px;
}

и есть проблема, которая заключается в том, что неправильно работает свойство text-overflow: ellipsis;. Я читал о том, что для его корректной работы нужны white-space: nowrap; и overflow: hidden;, но вот куда их применять я не совсем понимаю.

Мне надо, чтобы <h3>Очень длинный заголовок новости</h3> заменялся на <h3>Очень длин...</h3>, но при этом <span class="news-important"> показывался всегда (прижимался к правому краю получается). В итоге должна получаться такое: Очень длин... Важно

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

Answer 1

можно текст заголовка обернуть в div, а "важность" отмечать классом для самого h3

.news-title {
  width: 275px;
  display: inline-block;
}

.news-title>h3 {
  display: grid;
  grid-template-columns: 1fr auto; /* оба резиновые, но fr длиннее :3 */
}

.important:after {
  content: 'ВАЖНО';
  margin-left: .5em;
  color: darkred;
}
.gold:after {
  content: 'важно и интересно :3';
  margin-left: .5em;
  color: orange;
}

.green:after {
  content: 'о природе';
  margin-left: .5em;
  color: darkgreen;
  grid-column: 3;
}

.news-title div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid green;
}
h3:after{
  border: 1px solid blue;
  grid-column: 2;
}

<div class="news-title">
<h3 class='important'><div>очень длинный заголовок</div></h3>
<h3 class='green'><div>длинный заголовок</div></h3>
<h3 class='gold'><div>заголовок</div></h3>
<h3><div>очень длинный, но не важный заголовок</div></h3>
<h3><div>очень длинный, но не важный заголовок</div></h3>
<h3><div>очень длинный, но не важный заголовок</div></h3>
<h3 class='important'><div>длинный заголовок</div></h3>
<h3 class='gold'><div>заголовок</div></h3>
</div>

БЛОГ НА HUSL

Неправильно работает text-overflow css

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