JavaScriptを使用してサイズ変更可能なサイドバーがあります。問題は、サイドバーのサイズがコンテンツの折り返しが発生するよりも小さい場合です。 （私はフレックスボックスのためだと思います）。CSSでのラッピングを防止するFlexbox
グリッドは、ブートストラップのような行と列に基づいています。
.column {
flex-basis: 0;
max-width: 100%;
flex-grow: 1;
}
.row {
display: flex;
flex-wrap: no-wrap;
margin: 0 -1rem;
}
私が達成したいのは、コンテンツが収縮していないことを示しています。
これは私が今までに達成したものとfiddleです。
と切り捨てるのテキストをお届けします幅の制約を持つ要素の子要素を、省略記号を持つ要素に置き換えます。
この場合、sidebarの子供からです。その理由は、フレックスアイテムのmin-widthがデフォルトでautoになります。つまり、そのコンテンツより小さくすることはできません。
私がどのようにしたらいいか分かりやすくするために、flex-ellipsisクラスを作成し、そのチェーンのすべての要素に追加しました。
また、負のマージンmargin: 0 -1rem;をrowクラスから削除しました。そうしないと、省略記号が見えなくなりました。
スタックはjsfiddleを助ける
const resizeHandle = document.getElementsByClassName("vertical-resize")[0];
const navbar = document.getElementById('sidebar');
function resizeNavbar(e) {
let size = (e.pageX + 5);
navbar.style.width = (e.pageX + 5) + "px";
}
function removeEvents() {
document.removeEventListener('mousemove', resizeNavbar);
document.removeEventListener('mouseup', resizeNavbar);
}
resizeHandle.addEventListener('mousedown',() => {
document.addEventListener('mousemove', resizeNavbar);
document.addEventListener('mouseup', removeEvents);
});* {
user-select: none;
color: #dadada;
}
.flex-ellipsis {
min-width: 0; /* added */
/* or overflow: hidden; */
}
p,
h6 {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.rounded-circle {
border-radius: 50% !important;
}
.no-margin {
margin: 0 !important;
}
.column {
flex-basis: 0;
max-width: 100%;
flex-grow: 1;
background: #4a4a4a;
}
.column-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%;
}
.row {
display: flex;
flex-wrap: nowrap; /*Even though no-wrap it still wraps as shown in picture.*/
/*margin: 0 -1rem;*/
}
.custom {
margin: auto;
padding: 10px 0px;
flex-wrap: nowrap;
}
.vertical-resize {
position: relative;
right: 0;
top: 0;
cursor: col-resize;
width: 5px;
background: aquamarine;
height: 100vh;
}<div class="row">
<div id="sidebar" style="width: 570px;">
<div class="align-items-center row custom flex-ellipsis" id="sidebar">
<div style="max-width: 2.5rem;" class="column-1">
<img class="rounded-circle" style="max-width: 28px; min-width: 28px;" alt="Avatar" src="https://d30y9cdsu7xlg0.cloudfront.net/png/138926-200.png">
</div>
<div class="column flex-ellipsis">
<div class="row">
<div class="column">
<p class="no-margin">Ahmed Tarek</p>
</div>
</div>
<div class="row flex-ellipsis">
<div class="column flex-ellipsis">
<h6 style="font-size: 11px;" class="no-margin">01 January, 0001</h6>
</div>
</div>
</div>
</div>
</div>
<div class="vertical-resize"></div>
<div class="column">
</div>
</div>それはそれです！、そのような詳細な答えのために多くのありがとう。 +1 –
メディアクエリ内または必要に応じて、他のプロパティと共にtext-overflowプロパティを使用する必要があります。
例えば
.list {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 48px; /* just for test */
}<div class="list">
this is a ver long list this is a ver long list this is a ver long list.
</div>これはあなたを助けることを願っています。
+1空白の空白のために、これは実際には動作しませんが、何らかの理由でtext-overflowから希望の '。 –
あなたはスニペットでそれを見ることができませんか？またはあなたのページに？あなたは+1のために投票することができます:) – Aslam
それは私のコードでまだスニペットで動作しません。これまでのところ、私が望むものにかなり近い白いスペースの折り返しを防ぐだけです。更新された質問と詳しい説明をご覧ください。 –
フルコードを私たちと共有していないので、私たちがあなたに実用的な解決策を提供することは困難です。しかし、このcssをコードに追加して、切り捨てたい場合もあります。
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;これは、フレキシボックスに出たとき、あなたがダウンしてから、すべてのレベルにmin-width: 0かoverflow: hiddenを設定する必要がある「...」
スニペット。可能であれば、1つ追加してください:) – semuzaboi
@ LGSonしかし、私はすでにあなたがコメントする前にそれを投稿しました。フィドルを見てください。 –
以前のコメント（今削除されている）の中に、私が上記のコメントで意味していたライブラリコードを投稿することを許可されていないと書きました。 – LGSon