Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Beispiele zum Ausblenden von Überläufen (Überlauf) in CSS
Detaillierte Erläuterung der Beispiele zum Ausblenden von Überläufen (Überlauf) in CSS
- 黄舟Original
- 2017-11-22 09:26:237546Durchsuche
Bei der WEB-Frontend-Entwicklung stoßen wir häufig auf einen Überlauf an Inhalten in DIV, der sich auf die Schönheit der Seite auswirkt. Ich glaube also, dass jeder an einen Überlauf in CSS denken wird 🎜>, heute werde ich Ihnen die detaillierte Erklärung des Überlaufversteckens (Überlaufs) in CSS vorstellen! Überlaufattributbeschreibung:
Version: CSS2 Kompatibilität: IE4+ NS6+ Vererbung: Keine
Syntax:overflow : visible | auto | hidden | scroll
sichtbar:: Inhalte werden nicht ausgeschnitten und keine Bildlaufleisten hinzugefügt. Wenn dieser Standardwert explizit deklariert wird, wird das Objekt auf die Größe des Fensters oder Rahmens zugeschnitten, der das Objekt enthält. Und die Einstellung des Clip-Attributs ist ungültig.
auto: Dies ist der Standardwert des Körperobjekts und des Textbereichs. Schneiden Sie den Inhalt aus und fügen Sie bei Bedarf Bildlaufleisten hinzu.versteckt: Inhalte, die die Größe des Objekts überschreiten, werden nicht angezeigt.
Scrollen: Bildlaufleisten immer anzeigen.
Nutzungsanweisungen und wichtige Punkte:
◎ Rufen Sie ab oder legen Sie fest, wie der Inhalt verwaltet werden soll, wenn der Inhalt des Objekts seine angegebene Höhe und Breite überschreitet.
◎ Wenn für Tabellen das Attribut
table-layout
auf „Fixed“ gesetzt ist, unterstützt das td-Objekt das Overflow-Attribut mit dem Standardwert „hidden“. Bei der Einstellung „Ausgeblendet“, „Scrollen“ oder „Automatisch“ werden Inhalte, die die TD-Größe überschreiten, abgeschnitten. Wenn es auf „Sichtbar“ gesetzt ist, führt es dazu, dass zusätzlicher Text in die Zellen rechts oder links von ◎ überläuft (abhängig von der Attributeinstellung Richtung). ◎ Ab IE5 ist diese Eigenschaft auf der MAC-Plattform verfügbar. Die entsprechende Skriptfunktion ist Überlauf.
Beispiel:
body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; }text-overflow Version: IE6+ Proprietäre Eigenschaften Vererbung: Keine
div overflow versteckter div-Text Punkte verwenden (Ellipsen) statt
für Überlauf. Im div-Layout läuft der Inhalt über den Container hinaus und überschreitet die durch den Container begrenzte Breite. Ich war sehr verwirrt, also habe ich es gesammelt und sortiert und festgestellt, dass ich den Inhalt über den Container hinaus zur Anzeige von Ellipsen bringen kann. Dieser Ansatz löst nicht nur das Problem, sondern ist auch sehr schön. Interessierte Freunde können darauf verweisen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>div中溢出文字用点代替的代码</title>
<style type="text/css">
/*<![CDATA[*/
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
/*]]>*/
</style>
</head>
<body>
<ul>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
</body>
</html>TD kann auch überlaufen und die Anzeige ausblendenVielleicht wird es jemand tun, sobald ich diesen Artikel so nenne Fragen Sie: Warum achten Sie immer noch auf die Tabelle? Ah, das ist schon lange veraltet ... Beeilen Sie sich zu Xhtml ... div ist gut ... ul ist gut ... ol ist gut ... dl ist gut...es ist vorbei, ich weiß nicht, was sonst noch besser ist.
Ist die Tabelle wirklich veraltet? Verstehst du Tisch wirklich? Wissen Sie wirklich, wie man Tabellen verwendet?
Wortgefechte sind nicht das, was wir tun wollen, überlassen Sie es denen, die viel Zeit haben.
Zurück zum Thema:
Ich kann mich nicht erinnern, wann jemand eine Tabelle zur Simulation des DataGrid verwendet und gefragt hat, warum der Text im td, der die feste Breite überschreitet, nicht ausgeblendet werden kann, aber wird direkt einwickeln?
Ja, das ist tatsächlich der Fall, wie zum Beispiel:
<style type="text/css">
table {width:500px;;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
td {white-space:nowrap;overflow:hidden;}
</style>
<table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden">
<tr>
<td class="col1">神舟 优雅Q400N</td>
<td class="col2">优雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
<td class="col3">迅驰4平台，突出的性价比，漂亮的外观</td>
</tr>
</table>Führen Sie den obigen Code aus. Sie werden feststellen, dass der Text in der Zelle den festgelegten Wert überschreitet Die Breite wird nicht ausgeblendet, sondern in einer neuen Zeile angezeigt. Dies ist natürlich nicht meine Absicht. Es scheint, dass dies eine Funktion der Tabelle ist. Sie kann die Kombination von {width:*px;white-space:nowrap;overflow:hidden;} nicht gut unterstützen -space: Nowrap funktioniert nicht, daher scheint overflow:hidden ungültig zu sein. {注：如果是一连串的无意义字符则可生效，例如：566770df0775f3e1934702e4353c78d9aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaab90dd5946f0946207856a8a37f441edf，这个时候就不需要{white-space:nowrap}来强制它在一行内Anzeige, da diese Reihe von a als ein Wort ohne Zeilenumbrüche erkannt wird, sodass a, die die Breite von .col1 überschreiten, ausgeblendet werden🎜> Nachdem der geänderte Code ausgeführt wurde, Sie werden feststellen, dass der Text, der die Breite überschreitet, tatsächlich ausgeblendet ist und der gewünschte Effekt erzielt zu werden scheint. .col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;} Tatsächlich kann die Verwendung einer prozentualen Breite das Problem des Ausblendens von Text lösen, aber dies scheint nicht die beste Lösung zu sein, da wir manchmal eine feste Breite und keine prozentuale Breite benötigen. Der Grund dafür ist, wie man den Text in der Zelle in einer Zeile ohne Umbruch anzeigt. [Lösung 2:] Um diese Anforderung zu erfüllen, können wir uns neben der Verwendung von Stilen auch ein Tag vorstellen, das schon lange nicht mehr verwendet wird Die Funktion dieses Elements besteht darin, die Anzeige des Inhalts in einer Zeile zu erzwingen. Nehmen Sie die folgenden Änderungen am obigen Code vor und lassen Sie alles andere unverändert: <table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden">
<tr>
<td class="col1"><nobr>神舟 优雅Q400N</nobr></td>
<td class="col2"><nobr>优雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</nobr></td>
<td class="col3"><nobr>迅驰4平台，突出的性价比，漂亮的外观</nobr></td>
</tr>
</table>
做了这个修改，会发现，效果确实达到，是不是该兴奋呢？不，这似乎还不是最佳的解决方案，因为毕竟使用了一个许久不用且不推荐使用的元素标记，这多少让人觉得有点不爽。
沿着这个思路，我换了一个角度来考虑这个问题，发现问题迎刃而解。
既然在固定宽度的单元格内无法只简单的给th,td加上white-space:nowrap，那么我们在固定宽度的单元格内再加一个标记元素呢？
最佳方案：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>回头来看看Table：TD也玩overflow:hidden</title>
<style type="text/css">
table {width:500px;;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
th strong {display:block;width:100%;}
tr strong,tr td {white-space:nowrap;overflow:hidden;}
</style>
</head>
<body>
<table border="1" cellspacing="0" summary="测试">
<thead>
<tr>
<th class="col1"><strong>产品名称</strong></th>
<th class="col2"><strong>产品介绍</strong></th>
<th class="col3"><strong>产品备注</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>神舟 优雅Q400N</td>
<td>优雅Q400N，2007年7月上市，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
<td>迅驰4平台，突出的性价比，漂亮的外观</td>
</tr>
</tbody>
</table>
</body>
</html>运行上面的代码，会发现这样的做法是可以的，而且从代码的简洁性、可读性和合理性几方面来说，都较前几种方案为好。
总结：
本文详细介绍了CSS中溢出隐藏（overflow）的实例详解，相信下伙伴么可以进一步的了解！ 还没有做过给单元格隐藏超过固定宽度内容的同学，可先在机器上玩玩，然后再来看本文
相关推荐：
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Beispiele zum Ausblenden von Überläufen (Überlauf) in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Zusammenfassung von sechs Implementierungsmethoden des JSDOMReady-Ereignisses
- Beispiele für die CSS-Implementierung verschiedener Spaltenlayouts auf der Seite
- Reine CSS3-Vollbild-Diashow-Effekte
- Reiner CSS3-Stil mit coolen, farbenfrohen 3D-Schaltflächen
- Atemberaubende sechseckige CSS3-Menüanimationseffekte