Hướng dẫn how do i force text to stay on one line in css? - làm cách nào để buộc văn bản nằm trên một dòng trong css?

Tôi có một văn bản dài bên trong

div {
    border: 1px solid black;
    width: 70px;
}

div {
    border: 1px solid black;
    width: 70px;
}

HTML:

<div>Stack Overflow is the BEST!!!</div>

CSS:

div {
    border: 1px solid black;
    width: 70px;
}

Làm thế nào tôi có thể buộc chuỗi ở lại trong một dòng (tức là, được cắt ở giữa "tràn")?

Tôi đã cố gắng sử dụng

div {
    border: 1px solid black;
    width: 70px;
}

Đã hỏi ngày 8 tháng 3 năm 2011 lúc 12:16Mar 8, 2011 at 12:16

Misha Moroshkomisha MoroshkoMisha Moroshko

161K221 Huy hiệu vàng494 Huy hiệu bạc729 Huy hiệu đồng221 gold badges494 silver badges729 bronze badges

1

Thử cái này:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

Đã trả lời ngày 8 tháng 3 năm 2011 lúc 12:20Mar 8, 2011 at 12:20

0

Trong phần CSS của bạn, sử dụng

div {
    border: 1px solid black;
    width: 70px;
}

Đã trả lời ngày 8 tháng 3 năm 2011 lúc 12:18Mar 8, 2011 at 12:18

Rob Agarrob AgarRob Agar

12.2k5 Huy hiệu vàng46 Huy hiệu bạc62 Huy hiệu Đồng5 gold badges46 silver badges62 bronze badges

div {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div>Stack Overflow is the BEST!!!</div>

Gogaz

2.2421 Huy hiệu vàng24 Huy hiệu bạc31 Huy hiệu đồng1 gold badge24 silver badges31 bronze badges

Đã trả lời ngày 5 tháng 10 năm 2016 lúc 6:35Oct 5, 2016 at 6:35

Tôi đã làm một câu đố:

http://jsfiddle.net/audetwebdesign/kh4aR/

Robagar chỉ ra

div {
    border: 1px solid black;
    width: 70px;
}

Một vài điều ở đây: Bạn cần

div {
    border: 1px solid black;
    width: 70px;
}

Ngoài ra, như đã đề cập, bạn có thể sử dụng

div {
    border: 1px solid black;
    width: 70px;
}

div {
    border: 1px solid black;
    width: 70px;
}

div {
    border: 1px solid black;
    width: 70px;
}

Đã trả lời ngày 8 tháng 3 năm 2011 lúc 13:15Mar 8, 2011 at 13:15

Marc AudetMarc AudetMarc Audet

45K10 Huy hiệu vàng61 Huy hiệu bạc82 Huy hiệu Đồng10 gold badges61 silver badges82 bronze badges

div {
    display: flex;
    flex-direction: row;
}

là giải pháp làm việc cho tôi. Trong một số trường hợp có danh sách ____ 11, điều này là cần thiết.

Một số giá trị hướng thay thế là

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

Đã trả lời ngày 4 tháng 8 năm 2018 lúc 18:48Aug 4, 2018 at 18:48

Hãy thử điều này. Nó sử dụng

div {
    border: 1px solid black;
    width: 70px;
}

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

div {
    border: 1px solid black;
    max-width: 70px;
    white-space: pre;
}

http://jsfiddle.net/NXchy/11/

Đã trả lời ngày 8 tháng 3 năm 2011 lúc 12:23Mar 8, 2011 at 12:23

Mike Bmike bMike B

12.6K20 Huy hiệu vàng84 Huy hiệu bạc109 Huy hiệu đồng20 gold badges84 silver badges109 bronze badges

Không có câu trả lời nào trước đây làm việc cho tôi.

Có những trường hợp bất kể bạn làm gì và tùy thuộc vào hệ thống (Oracle Designer: Oracle 11G - PL/SQL), các div sẽ luôn đi đến dòng tiếp theo, trong trường hợp đó bạn nên sử dụng thẻ Span thay thế.

Điều này làm việc kỳ diệu cho tôi.

<span float: left; white-space: nowrap; overflow: hidden; onmouseover="rollOverImageSectionFiveThreeOne(this)">
    <input type="radio" id="radio4" name="p_verify_type" value="SomeValue"  />
</span> 
Just Your Text || 
<span id="headerFiveThreeOneHelpText" float: left; white-space: nowrap; overflow: hidden;></span>

Đã trả lời ngày 20 tháng 8 năm 2013 lúc 13:15Aug 20, 2013 at 13:15

1

Trong khoảng thời gian bạn cần thêm:

div {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

span {
  width: 70px;
  border: 1px solid black;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  }

<span>Stack Overflow is the BEST!!!</sapn>

GED DPOD

1.6271 Huy hiệu vàng12 Huy hiệu bạc 30 Huy hiệu Đồng1 gold badge12 silver badges30 bronze badges

Đã trả lời ngày 25 tháng 5 lúc 15:00May 25 at 15:00

Hãy thử đặt chiều cao, vì vậy khối không thể phát triển để phù hợp với văn bản của bạn và giữ tham số

div {
    border: 1px solid black;
    width: 70px;
}

Dưới đây là một ví dụ về những gì bạn có thể thích nếu bạn cần hiển thị hai dòng cao:

div {
    border: 1px solid black;
    width: 70px;
}

Đã trả lời ngày 8 tháng 3 năm 2011 lúc 12:18Mar 8, 2011 at 12:18

Rob Agarrob AgarWouter Simons

12.2k5 Huy hiệu vàng46 Huy hiệu bạc62 Huy hiệu Đồng1 gold badge18 silver badges15 bronze badges

4