Как заставить сокращать строчку без блока

Question

#f {
   width:400px;
}

#h {
   width:100%;
   display:flex;
   align-items: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#g {
    background-color: #000;
    color:#fff;
    margin-left: auto;
}

<div id=f>
    <div id=h>
         Строчка, которую необходимо урезать..............Текст
         <div id=g>Не сокращать</div>
     </div>
</div>

Вопрос в том, возможно ли урезать строчку если она не помещается в ширину блока. При этом, не обертывая ее в html блок.

Answer 1

легко

#x {
  width:25px;
  display: inline-block;
  overflow: hidden;
}

<div id="x">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

если это не то что нужно, переформулируйте вопрос.

В моем примере, расположен блок, который должен быть прижатым [не?] по правую сторону, а по левую от него.

если речь про #G примените к нему float left:

#x {
  width:25px;
  display: inline-block;
  overflow: hidden;
}
#g{background: gray; float: left;}

<div id="x">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="g">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>

БЛОГ НА HUSL

Как заставить сокращать строчку без блока

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