обнаружение истинной границы, дополнение и поля из JavaScript
Вот хакерская идея , где вам нужно дублировать текст. Хитрость заключается в том, чтобы всегда располагать текст в правом нижнем углу контейнера, тогда у другого текста будут псевдоэлементы, создающие наложение, которое будет скрывать его, поэтому мы будем видеть позиционированный текст, только когда этот текст находится вне контейнера.
Чтобы лучше видеть фокус, измените белый цвет, чтобы понять, как наложение только скрывает позиционированный текст.
Текст «должен остаться» должен занимать одну строку, а 3 точки размещаются вручную в зависимости от длины текста
.title {
width: 250px;
height: 70px;
overflow: hidden;
position: relative;
border: 1px solid black;
display:inline-block;
vertical-align:top;
margin:5px 0;
}
.title::before {
content: attr(data-text);
position: absolute;
bottom: 3px;
right: 13px;
color: red;
background: #fff;
}
.title::after {
content: '... ';
position: absolute;
bottom: 3px;
right: 130px;
color: #000;
background: #fff;
padding: 0 3px;
}
.stay {
color: red;
position: relative;
z-index:1;
background: #fff;
display:inline-block;
}
.stay::before {
content: "";
position: absolute;
z-index:1;
top: 100%;
height: 100vh;
left: -50vw;
right: -50vw;
background: #fff;
}
.stay::after {
content: "";
position: absolute;
z-index:1;
left: 100%;
width: 100vw;
top:0;
bottom: -50vh;
background: #fff;
}2 ответа
Это возможно, но конечно, каждый браузер имеет свою собственную реализацию. К счастью PPK сделал всю тяжелую работу для нас:
С jQuery:
var $ elm = $ ('. Box'); var hPadding = $ elm.outerWidth () - $ elm.width (); var vPadding = $ elm.outerHeight () - $ elm.height (); var hBorder = $ elm.outerWidth () - $ elm.innerWidth (); var vBorder = $ elm.outerHeight () - $ elm.innerHeight (); console.log ("Горизонтальный отступ и граница:", hPadding); console.log ("Вертикальные отступы и граница:", vPadding); console.log ("Горизонтальная граница:", hBorder); console.log ("Вертикальная граница:", vBorder); .box {width: 50%; обивка: 10vw; граница: сплошной красный 10px; } < / div> Ваш путь (но вы должны указать paddingLeft, paddingRight .. не просто «заполнение»):
var elm = $ ('. box'); console.log ("отступ слева (PX):", elm.css ("paddingLeft")); .box {padding: 0 50px 0 5vw; граница: сплошной зеленый 2 пикселя; ширина: 300 пикселей; высота: 300 пикселей; маржа слева: 4 пикселя; } некоторый текст здесь