私はCSSの問題があり、それが可能かどうか疑問に思っています。 このケースはシンプルですが、実際には複雑で、おそらくはのCSSハックまたはトリックでのみ行うことができます。子が親CSSをオーバーフローした場合は下矢印を表示
私はが必要です。子要素のテキストが親要素より高い場合は矢印を表示してください。 JavaScriptはどんな形式でも使用できません。のみ、CSSです。
矢印は何でもかまいません。div要素、background-imageなど何でもかまいません。何もする必要がないためです。子のサイズがparrentのサイズより小さい場合、矢印は表示されません。
HTMLの構造は例ですが、あなたは別のアイデアがあれば私は心が開いています。
これを達成することができなかったため、私はコードを書いていませんでした。この簡単な例で作られ
は、z屈折率特性と2つの擬似要素に依存しています。
.wrap{
position:relative;
width:500px;
height:150px;
border:1px solid red;
overflow:hidden;
background:#fff;
}
.wrap:after{
content:'';
display:block;
position:relative;
height:inherit;
background:inherit;
z-index:2;
}
.wrap:before{
content:'\25BC';
position:absolute;
left:0; bottom:0;
width:100%; height:1.2em;
line-height:1.2em;
background:rgba(255,255,255,0.8);
text-align:center;
z-index:1;
}<div class="wrap">
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut nulla hendrerit, scelerisque enim quis, feugiat lacus. Donec massa urna, faucibus at erat vel, auctor egestas risus. Etiam vitae urna sed urna vehicula lobortis. Nunc dapibus, neque vel consectetur lobortis, augue lorem gravida nunc, nec lacinia nunc lectus sit amet tellus. Sed efficitur urna risus. Mauris varius, est in vehicula dapibus, felis nunc convallis libero, at lacinia risus felis id libero. Sed elit ipsum, interdum at lorem vel, laoreet tristique ante. Praesent lectus mauris, finibus ut gravida sed, pulvinar quis orci.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut nulla hendrerit, scelerisque enim quis, feugiat lacus. Donec massa urna, faucibus at erat vel, auctor egestas risus. Etiam vitae urna sed urna vehicula lobortis. Nunc dapibus, neque vel consectetur lobortis, augue lorem gravida nunc, nec lacinia nunc lectus sit amet tellus. Sed efficitur urna risus. Mauris varius, est in vehicula dapibus, felis nunc convallis libero, at lacinia risus felis id libero. Sed elit ipsum, interdum at lorem vel, laoreet tristique ante. Praesent lectus mauris, finibus ut gravida sed, pulvinar quis orci.</div>
</div>
<div class="wrap">
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut nulla hendrerit, scelerisque enim quis, feugiat lacus. Donec massa urna, faucibus at erat vel, auctor egestas risus. Etiam vitae urna sed urna vehicula lobortis. Nunc dapibus, neque vel consectetur lobortis, augue lorem gravida nunc, nec lacinia nunc lectus sit amet tellus. Sed efficitur urna risus. Mauris varius, est in vehicula dapibus. Sed efficitur urna risus. Mauris varius, est in vehicula dapibus.Sed efficitur urna risus. Mauris varius, est in vehicula dapibus .</div>
</div>私は完全に感銘を受けています。うわー！ –
うまくやった。ただし、 '.child'要素の高さが' .wrap'要素の高さと一致する場合、矢印は引き続き表示されます。 – Shaggy
@Shaggy thx、はい、これはこのテクニックの欠点です –
この例では、矢印を隠していませんが、それはコンテンツが展開されるのを許可し、それがオーバーフローしたときに読むん。
.outer{
border: 2px solid red;
margin: 1em auto;
width: 350px;
display: flex;
flex-direction: column-reverse;
align-items: center;
}
.inner{
border: 1px solid gray;
padding: 0.5em 2ch;
max-height: 8em;
min-height: 8em;
overflow: hidden;
box-shadow: 0 -0.5em 0.5em gray inset;
transition: max-height 0.25s ease-in-out;
}
p{
margin-top: 0;
}
label{
margin: 0 auto;
transform: rotate(90deg);
transition: transform 0.25s ease-in-out;
}
.arrow{
margin: 0 auto;
display: none;
}
.arrow:checked + label{
transform: rotate(-90deg);
transition: transform 0.5s ease-in-out;
}
.arrow:checked + label + .inner{
max-height: 25em;
transition: max-height 0.5s ease-in-out;
}<div class="outer">
<input class="arrow" id="arrow" type="checkbox" />
<label for="arrow">▶</label>
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est impedit fugit quasi dignissimos, itaque labore culpa, maiores sit optio officiis sapiente odit id repellendus accusamus nihil consequatur praesentium possimus dicta! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quos voluptas beatae nesciunt tenetur. Quas iste, odit sapiente facere vitae, tenetur soluta fuga odio perspiciatis unde blanditiis, voluptatum, doloremque suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis eius, voluptatum, architecto consectetur eaque quisquam possimus tenetur sunt quibusdam dolorem enim eum! Atque, at vel officia, non ipsa a unde!</p>
</div>
</div>
<div class="outer">
<input class="arrow" id="arrow2" type="checkbox" />
<label for="arrow2">▶</label>
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est impedit fugit quasi dignissimos.</p>
</div>
</div>
CSSは 'もしelse'文のサポートを欠いており、レンダリングされたコンテンツの寸法を取得するためのネイティブ機能を持っていません。 –
私はそれを知っています。私はそのような言葉を使ってより良い例を書いています。 –
私の要点は、これらの側面が必要であり、CSSに欠けていることが、CSS専用のソリューションを排除していることです。 –