คำถามติดแท็ก overflow

เป็นไปได้หรือไม่ที่จะจำกัดความยาวของข้อความไว้ที่ "n" บรรทัดโดยใช้ CSS (หรือตัดมันเมื่อล้นในแนวตั้ง) text-overflow: ellipsis; ใช้ได้กับข้อความ 1 บรรทัดเท่านั้น ข้อความต้นฉบับ: Ultrices natoque mus mattis, aliquam, cras in pellentesque tincidunt elit purus lectus, หรือสิ่งอื่นใด, องค์ประกอบของสิ่งที่ คุณต้องการ! นั่งเฉยๆ! การใช้งานของ turpis กับเพลงนี้ ! Dapibus sed aenean, magna sagittis, lorem velit ผลลัพธ์ที่ต้องการ (2 บรรทัด): Ultrices natoque mus mattis, aliquam, cras in pellentesque tincidunt …

515 css  text  overflow  ellipsis 

ฉันต้องการใช้ CSS text-overflowในเซลล์ตารางเช่นหากข้อความยาวเกินกว่าจะใส่ลงในหนึ่งบรรทัดได้ก็จะตัดด้วยจุดไข่ปลาแทนการพันเป็นหลายบรรทัด เป็นไปได้ไหม ฉันลองสิ่งนี้: td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } แต่white-space: nowrapดูเหมือนว่าจะทำให้ข้อความ (และเซลล์ของมัน) ขยายออกไปทางขวาอย่างต่อเนื่องผลักดันความกว้างทั้งหมดของตารางเกินความกว้างของภาชนะ อย่างไรก็ตามหากไม่มีข้อความจะยังคงพันบรรทัดต่อเมื่อถึงขอบของเซลล์

500 css  overflow 

สมมติว่าคุณมีสไตล์และมาร์กอัป: ul { white-space: nowrap; overflow-x: visible; overflow-y: hidden; /* added width so it would work in the snippet */ width: 100px; } li { display: inline-block; } <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>1</li> <li>2</li> …

455 html  css  overflow 

ฉันไม่รู้ว่าทำไม CSS ง่าย ๆ นี้ไม่ทำงาน ... .app a { height: 18px; width: 140px; padding: 0; overflow: hidden; position: relative; margin: 0 5px 0 5px; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; color: #000; } <div class="app"> <a href="">Test Test Test Test Test Test</a> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ควรตัดรอบ "การทดสอบ" ครั้งที่ 4

368 overflow  ellipsis  css 

เป็นไปได้หรือไม่ที่จะตรวจสอบกองoverflow:autoการ? ตัวอย่างเช่น: HTML <div id="my_div" style="width: 100px; height:100px; overflow:auto;" class="my_class"> * content </div> jQuery $('.my_class').live('hover', function (event) { if (event.type == 'mouseenter') { if( ... if scrollbar visible ? ... ) { alert('true'): } else { alert('false'): } } }); บางครั้งเนื้อหาสั้น (ไม่มีแถบเลื่อน) และบางครั้งก็ยาว (มองเห็นแถบเลื่อน)

277 jquery  scroll  overflow 

ต่อไปนี้เป็นรหัสของฉันและฉันต้องการที่จะเข้าใจว่าทำไม #firstDiv ถูกผลักลงเบราว์เซอร์ทั้งหมด ฉันต้องการที่จะเข้าใจการทำงานภายในของความจริงที่ว่าทำไมมันถูกผลักลงมามากกว่าที่จะดึงมันขึ้นมาโดยวิธีใดวิธีหนึ่ง (และฉันรู้วิธีจัดอันดับเสื้อของพวกเขา :)) และฉันรู้ว่ามันล้น: ซ่อนซึ่งก่อให้เกิด แต่ไม่แน่ใจว่าทำไมมันผลักดัน div ที่ลง body { width: 350px; margin: 0px auto; } #container { border: 15px solid orange; } #firstDiv { border: 10px solid brown; display: inline-block; width: 70px; overflow: hidden; } #secondDiv { border: 10px solid skyblue; float: left; width: 70px; } …

238 overflow  css 

ดังนั้นปัจจุบันฉันมี: #div { position: relative; height: 510px; overflow-y: scroll; } อย่างไรก็ตามฉันไม่เชื่อว่าจะมีผู้ใช้บางคนที่ชัดเจนว่ามีเนื้อหาเพิ่มเติม พวกเขาสามารถเลื่อนหน้าลงโดยไม่ทราบว่า div ของฉันมีเนื้อหามากขึ้น ฉันใช้ความสูง 510px เพื่อตัดข้อความบางส่วนออกไปในบางหน้าดูเหมือนว่ามีเนื้อหามากกว่านี้ แต่มันใช้ไม่ได้กับทุกคน ฉันใช้ Mac และใน Chrome และ Safari แถบเลื่อนแนวตั้งจะแสดงเฉพาะเมื่อเมาส์อยู่เหนือ Div และคุณเลื่อนอย่างแข็งขัน มีวิธีที่จะแสดงมันเสมอ?

225 css  macos  scroll  overflow 

พบกับเฟร็ด เขาเป็นโต๊ะ: <table border="1" style="width: 100%;"> <tr> <td>This cells has more content</td> <td>Less content here</td> </tr> </table> อพาร์ตเมนต์ของ Fred มีนิสัยแปลกประหลาดในการเปลี่ยนขนาดดังนั้นเขาจึงเรียนรู้ที่จะซ่อนเนื้อหาบางส่วนของเขาเพื่อที่จะไม่ผลักดันหน่วยอื่น ๆ ทั้งหมดและผลักห้องนั่งเล่นของนางวิทฟอร์ดออกไปให้อภัย: <table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;"> <tr> <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td> <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td> </tr> </table> วิธีนี้ใช้ได้ผล …

223 html  css  overflow  tablelayout 

ฉันมีองค์ประกอบ div ในหน้าของฉันโดยตั้งความสูงไว้ที่ 100% ความสูงของร่างกายนั้นตั้งไว้ที่ 100% div ภายในมีพื้นหลังและทั้งหมดนั้นและแตกต่างจากพื้นหลังของร่างกาย วิธีนี้ใช้สำหรับสร้าง div div 100% ของความสูงของหน้าจอเบราว์เซอร์ แต่ปัญหาคือฉันมีเนื้อหาภายใน div ที่ขยายในแนวตั้งเกินความสูงของหน้าจอเบราว์เซอร์ เมื่อฉันเลื่อนลง div จะสิ้นสุดที่จุดที่คุณต้องเริ่มเลื่อนหน้า แต่เนื้อหาล้นเกินกว่านั้น ฉันจะทำให้ div ไปทางด้านล่างเพื่อให้พอดีกับเนื้อหาภายในได้อย่างไร นี่เป็น CSS ที่เรียบง่ายของฉัน: body { height:100%; background:red; } #some_div { height:100%; background:black; } เมื่อฉันเลื่อนหน้าความมืดจะสิ้นสุดลงและเนื้อหาจะไหลลงบนพื้นหลังสีแดง ดูเหมือนว่าไม่สำคัญว่าฉันจะตั้งค่า positon ให้สัมพันธ์หรือสัมบูรณ์บน #some_div ปัญหาจะเกิดขึ้นด้วยวิธีใดก็ตาม เนื้อหาภายใน #some_div ส่วนใหญ่อยู่ในตำแหน่งที่แน่นอนและสร้างขึ้นแบบไดนามิกจากฐานข้อมูลเพื่อไม่ให้ทราบความสูงล่วงหน้า แก้ไข: นี่คือภาพหน้าจอของปัญหา:

172 css  html  height  overflow 

ฉันมีคำถามเกี่ยวกับวิธีรับความสูงของ div ฉันรู้.height()และinnerHeight()แต่ไม่มีของพวกเขาไม่ทำงานสำหรับฉันในกรณีนี้ สิ่งนี้คือในกรณีนี้ฉันมี div ที่มีความกว้างมากเกินไป overflow: เลื่อนและ div มีความสูงคงที่ หากฉันใช้.height()หรือinnerHeight()ทั้งสองอย่างให้ความสูงของพื้นที่ที่มองเห็นได้ แต่ถ้าฉันต้องการบัญชีที่มีการไหลมากเกินไปฉันจะดำเนินการอย่างไร

160 jquery  height  overflow 

วิธีที่ง่ายที่สุดในการตรวจสอบว่าองค์ประกอบได้รับการล้น? กรณีการใช้งานของฉันคือฉันต้องการ จำกัด กล่องเนื้อหาบางอย่างให้มีความสูง 300px หากเนื้อหาภายในสูงกว่านั้นฉันจะตัดมันด้วยการล้น แต่ถ้ามันล้นฉันต้องการแสดงปุ่ม 'มากกว่า' แต่ถ้าไม่ใช่ฉันไม่ต้องการแสดงปุ่มนั้น มีวิธีง่าย ๆ ในการตรวจจับการล้นหรือมีวิธีการที่ดีกว่า

153 javascript  css  overflow 

ฉันมีสองปัญหาจริง ๆ แต่ให้แก้ไขปัญหาหลักก่อนเพราะฉันเชื่อว่าอีกที่อยู่ง่ายกว่า ฉันมี div ตำแหน่งคงที่ที่ด้านซ้ายของสกรอลสำหรับเมนู ด้านขวาเป็น div มาตรฐานที่เลื่อนอย่างถูกต้อง ปัญหาคือเมื่อเบราว์เซอร์ดูพอร์ตมีขนาดเล็กเกินไปที่จะดูเมนูทั้งหมด .. ไม่มีวิธีใดที่จะเลื่อนดูที่ฉันสามารถหาได้ (อย่างน้อยก็ไม่ใช่ css) ฉันได้ลองใช้โอเวอร์โฟลว์ต่าง ๆ ใน css แต่ไม่มีอะไรทำให้ div เลื่อน div ที่มีเมนูตั้งไว้ที่ min-height: 100% และ position: fixed .. ทั้งสองคุณสมบัติที่ฉันต้องการเก็บไว้ div ที่มีเมนูอยู่ใน wrapper div อื่นที่อยู่ในตำแหน่งอย่างแน่นอนและตั้งค่าความสูงไว้ที่ 100% ฉันจะเลื่อนดูในแนวตั้งได้อย่างไรถ้าเนื้อหานั้นสูงเกินไปสำหรับ div ที่ทำให้ฉันไปที่ปัญหาอื่น ๆ ที่ฉันไม่ต้องการให้แถบเลื่อนเพื่อแสดง .. แต่ฉันคิดว่าฉันอาจมีคำตอบที่แล้ว (เฉพาะมันไม่ทำงานเพราะฉันไม่สามารถรับ div เพื่อเลื่อน เริ่มต้นกับ). ทางออกใด ๆ ? …

150 javascript  css  scroll  overflow  css-position 

ฉันมี 3 ระดับdiv: (สีเขียวด้านล่าง)ระดับชั้นนำด้วยdiv overflow: hiddenนี่เป็นเพราะฉันต้องการเนื้อหาบางส่วน (ไม่แสดงที่นี่) ภายในกล่องนั้นจะถูกครอบตัดหากมีขนาดเกินขนาดของกล่อง (สีแดงด้านล่าง)ภายในนี้ผมต้องมีdiv position: relativeการใช้งานเฉพาะสำหรับสิ่งนี้คือสำหรับระดับถัดไป (เป็นสีฟ้าด้านล่าง)ในที่สุดdivฉันก็ออกจากการไหลด้วยposition: absoluteแต่ฉันต้องการตำแหน่งที่สัมพันธ์กับสีแดงdiv(ไม่ใช่หน้า) ฉันต้องการให้กล่องสีฟ้าถูกนำออกจากการไหลและขยายออกไปนอกกล่องสีเขียว แต่จะวางในตำแหน่งที่สัมพันธ์กับกล่องสีแดงดังที่: อย่างไรก็ตามด้วยรหัสด้านล่างฉันได้รับ: และนำposition: relativeกล่องสีแดงออกตอนนี้กล่องสีฟ้าได้รับอนุญาตให้ออกจากกล่องสีเขียว แต่ไม่ได้อยู่ในตำแหน่งที่เกี่ยวข้องกับกล่องสีแดงอีกต่อไป: มีวิธีการ: เก็บoverflow: hiddenในกล่องสีเขียว กล่องสีฟ้าขยายออกไปนอกกล่องสีเขียวและอยู่ในตำแหน่งที่สัมพันธ์กับกล่องสีแดงหรือไม่? แหล่งที่มาเต็มรูปแบบ: #d1 { overflow: hidden; background: #efe; padding: 5px; width: 125px; } #d2 { position: relative; background: #fee; padding: 2px; width: 100px; height: 100px; } #d3 { …

144 css  overflow  css-position 

ฉันมีเว็บไซต์ที่นี่ ดูได้ในเบราว์เซอร์สก์ท็อปที่แถบเมนูสีดำถูกขยายครอบคลุมเฉพาะไปที่ขอบของหน้าต่างตั้งแต่มี bodyoverflow-x:hidden ในเบราว์เซอร์มือถือไม่ว่าจะเป็น Android หรือ iOS แถบเมนูสีดำจะแสดงความกว้างเต็มรูปแบบซึ่งจะทำให้ช่องว่างทางด้านขวาของหน้าเว็บ เท่าที่ฉันสามารถบอกได้ช่องว่างนี้ไม่ได้เป็นส่วนหนึ่งของhtmlหรือbodyแท็ก แม้ว่าฉันจะตั้งค่าวิวพอร์ตเป็นความกว้างเฉพาะใน<head>: <meta name="viewport" content="width=1100, initial-scale=1"> ไซต์ขยายเป็น 1100px แต่ยังคงมีช่องว่างเกิน 1100 ฉันพลาดอะไรไป ฉันจะเก็บวิวพอร์ตเป็น 1100 และตัดการโอเวอร์โฟลว์ได้อย่างไร

142 css  overflow  viewport  mobile-browser 

ฉันต้องการแสดงข้อกำหนดและเงื่อนไขในเว็บไซต์ของฉัน ฉันไม่ต้องการใช้ช่องข้อความและไม่ต้องการใช้ทั้งหน้า ฉันแค่ต้องการแสดงข้อความของฉันในพื้นที่ที่เลือกและต้องการใช้แถบเลื่อนแนวตั้งเท่านั้นเพื่อลงไปอ่านข้อความทั้งหมด ขณะนี้ฉันใช้รหัสนี้: <div style="width:10;height:10;overflow:scroll" > text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text …

139 css  html  overflow