Không ngắt dòng sau dấu gạch nối

340

Tôi đang tìm cách ngăn chặn ngắt dòng sau dấu gạch nối -trên cơ sở từng trường hợp tương thích với tất cả các trình duyệt.

Thí dụ:

Tôi có văn bản này: 3-3/8"trong HTML là đây: 3-3/8”

Vấn đề là ở gần cuối dòng, vì dấu gạch nối, nó bị vỡ và kết thúc sang dòng tiếp theo thay vì coi nó như một từ đầy đủ ...

3-
3/8"

Tôi đã thử chèn "ký tự không độ rộng không phá vỡ", nhưng không có may mắn ...

3-&#65279;3/8&rdquo;

Tôi đang thấy điều này trong Safari và nghĩ rằng nó sẽ giống nhau trong tất cả các trình duyệt.

Sau đây là doctypemã hóa ký tự và ký tự của tôi ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Có cách nào tôi có thể ngăn chặn những thứ này khỏi ngắt dòng sau dấu gạch nối không? Tôi không cần bất kỳ giải pháp nào áp dụng cho toàn bộ trang ... chỉ cần một cái gì đó tôi có thể chèn khi cần, như "chiều rộng không có ký tự không phá vỡ", ngoại trừ một ký tự hoạt động.

Đây là một bản Demo. Đơn giản chỉ cần làm cho khung hẹp hơn cho đến khi dòng bị ngắt ở dấu gạch nối.

http://jsfiddle.net/RagKH/

— Lấp lánh
nguồn

@EricLeschinski, điều đó đã được đăng dưới dạng câu trả lời: stackoverflow.com/a/12362315/594235

— Sparky

Với charset = utf-8, bạn có thể đặt vào - một dấu gạch nối không phá vỡ

— QuentinUK

@QuentinUK, phải ... đó chưa phải là câu trả lời được chấp nhận? ‑là một dấu gạch nối không phá vỡ.

— Sparky

& # 8209; là ASCII thông thường, vì vậy utf-8 là không cần thiết. Với mã hóa utf-8 của trang, có thể đặt các ký tự thực tế. - không phải là nhân vật giống như - mặc dù nó trông giống nhau.

— QuentinUK

HTML chính xác cho những gì bạn đã viết, sẽ là 3-3/8″hoặc 3-3/8″. Trích dẫn không phải là số nguyên tố. Nếu bạn muốn nó trong ASCII thuần túy, chỉ cần sử dụng dấu ngoặc kép thẳng thay thế ( "). Tốt hơn là, nếu nó sẽ được trình bày dưới dạng văn bản tốt, dễ đọc, thay vào đó bạn sẽ sử dụng 33/8</style>″, hiển thị '3⅜ ″'

— Người đàn ông đóng hộp

579

Hãy thử sử dụng dấu gạch nối không phá vỡ ‑. Tôi đã thay thế dấu gạch ngang bằng ký tự đó trong jsfiddle của bạn, thu nhỏ khung hình xuống nhỏ nhất có thể và dòng không bị tách ra ở đó nữa.

— CanSpice
nguồn

10

Tôi hình dung nó giống như không gian không phá vỡ, vì vậy tôi chỉ tìm kiếm "dấu gạch ngang không phá vỡ", và kết thúc tại đây . :-)

— CanSpice

Ahhh ... tôi đã thực hiện một tìm kiếm "không phá vỡ nhân vật" và đánh vào tường với điều đó . Tôi chưa bao giờ nghĩ rằng có một ký tự gạch nối độc lập sẽ không bị phá vỡ.

— Lấp lánh

6

Trong IE8 / 9, ký tự này hiển thị dài hơn dấu gạch nối thông thường. Nó dường như có cùng kích thước với một en-dash.

— mrtsherman

21

Lý do tại sao kết quả có thể khác với dấu gạch ngang thông thường là nhiều phông chữ không chứa dấu gạch nối không phá vỡ. Này buộc các trình duyệt để sử dụng một phông chữ khác nhau, và trong khi gạch nối non-breaking trông giống như gạch nối bình thường trong đó chữ, không có đảm bảo rằng nó phù hợp với một gạch nối bình thường từ một phông chữ khác nhau.

— Jukka K. Korpela

5

Tôi nghĩ câu trả lời của Deb là tốt nhất.

— Ray Cheng

256

Bạn cũng có thể gói văn bản có liên quan với

<span style="white-space: nowrap;"></span>

— Nợ
nguồn

17

Vâng, đây là một câu trả lời tốt hơn so với một imho được chấp nhận. Cảm ơn @Deb.

— CMH

38

@CMH điều này không giúp ích gì nếu bạn muốn bọc khoảng trắng (những nơi trống mà người dùng nhìn thấy khoảng trắng - không có gì) nhưng bạn không muốn chia từ bằng dấu gạch nối, ví dụ: từ "e-mail". Câu trả lời được chấp nhận giúp trong trường hợp này

— xmojmr

12

Trong trường hợp đó, bạn chỉ có thể sử dụng khoảng chỉ quanh "e-mail".

— guirto

3

@CMH, đây là một câu trả lời tốt cũng hoạt động, vì vậy tôi đã bình chọn nó. Tuy nhiên, tôi đã chọn không chấp nhận câu trả lời này vì tôi đã yêu cầu một nhân vật sẽ không tự động chuyển sang dòng tiếp theo. Việc một "dấu gạch nối không phá vỡ" ( ‑) có thể hiển thị hơi dài hơn một dấu gạch nối thông thường trong một số trình duyệt nhất định đối với tôi.

— Sparky

11

@Sparky Một vấn đề với việc sử dụng các ký tự khác nhau là nó làm rối kết quả tìm kiếm. Cố gắng tìm "3-3 / 8" trên trang sẽ không tìm thấy dấu gạch nối không phá vỡ.

— Mr Lister

23

IE8 / 9 hiển thị dấu gạch nối không phá vỡ được đề cập trong câu trả lời của CanSpice dài hơn dấu gạch nối thông thường. Nó là chiều dài của một dấu gạch ngang thay vì dấu gạch nối thông thường. Sự khác biệt hiển thị này là một công cụ đối phó với tôi.

Vì tôi không thể sử dụng câu trả lời CSS được chỉ định bởi Deb, thay vào đó tôi đã chọn không sử dụng thẻ ngắt.

<nobr>e-mail</nobr>

Ngoài ra, tôi đã tìm thấy một kịch bản cụ thể khiến IE8 / 9 bị hỏng trên dấu gạch nối.

Một chuỗi chứa các từ được phân tách bằng khoảng trắng không ngắt -  
Chiều rộng bị giới hạn
Chứa một dấu gạch ngang

IE tái hiện nó như thế này.

Ví dụ về ngắt dấu gạch nối trong IE8 / 9

Các mã sau đây tái tạo vấn đề trong hình trên. Tôi đã phải sử dụng thẻ meta để buộc hiển thị lên IE9 vì IE10 đã khắc phục sự cố. Không có fiddle vì nó không hỗ trợ thẻ meta.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <meta charset="utf-8"/>
        <style>
            body { padding: 20px; }
            div { width: 300px; border: 1px solid gray; }
        </style>
    </head>
    <body>
        <div>      
            <p>If&nbsp;there&nbsp;is&nbsp;a&nbsp;-&nbsp;and&nbsp;words&nbsp;are&nbsp;separated&nbsp;by&nbsp;the&nbsp;whitespace&nbsp;code&nbsp;&amp;nbsp;&nbsp;then&nbsp;IE&nbsp;will&nbsp;wrap&nbsp;on&nbsp;the&nbsp;dash.</p>
        </div>
    </body>
</html>

— ông bà
nguồn

6

Sử dụng nobrlà cách đa trình duyệt nhất và hoạt động độc lập với phông chữ và CSS. Phần nobrtử không được xác định trong thông số kỹ thuật HTML, nhưng điều này chỉ được coi là một hình thức. Nhưng nếu bạn phải viết bằng thông số kỹ thuật HTML, thì câu trả lời của Deb, sử dụng CSS, là lựa chọn tốt nhất.

— Jukka K. Korpela

5

Tôi tò mò tại sao bạn không thể sử dụng giải pháp CSS.

— Ryan Ahearn

2

@RyanAhearn - Tôi đang sử dụng một công cụ của bên thứ ba không cho tôi nhiều quyền kiểm soát đối với html. Nó không hỗ trợ khai báo thẻ nội tuyến.

— mrtsherman

Thay vì '', bạn có thể không sử dụng một khoảng với một lớp và kiểm soát nó bằng CSS không?

— StephenESC

1

Lưu ý rằng nobrthẻ không chuẩn và có thể bị hỏng bất cứ lúc nào. Tài liệu MDN không khuyến nghị sử dụng thẻ này: developer.mozilla.org/en-US/docs/Web/HTML/Euity/nobr

— Philipp

16

Bạn cũng có thể thực hiện "cách tham gia" bằng cách chèn " U+2060Word Joiner ".

Nếu Accept-Charsetcho phép, chính ký tự unicode có thể được chèn trực tiếp vào đầu ra HTML.

Mặt khác, nó có thể được thực hiện bằng cách sử dụng mã hóa thực thể. Ví dụ: để tham gia văn bản red-brown, sử dụng:

red-&#x2060;brown

hoặc (tương đương thập phân):

red-&#8288;brown

. Một nhân vật có thể sử dụng khác là " U+FEFFKhông gian không phá vỡ chiều rộng bằng không " ^{^{[⁠ 1]}} :

red-&#xfeff;brown

và (tương đương thập phân):

red-&#65279;brown

^{[1] : Lưu ý rằng mặc dù phương pháp này vẫn hoạt động trong các trình duyệt chính như Chrome, nhưng nó đã bị từ chối kể từ Unicode 3.2 .}

So sánh "cách nối" với " U+2011Dấu gạch nối không phá vỡ ":

Trình nối từ có thể được sử dụng cho tất cả các ký tự khác, không chỉ dấu gạch nối.
Khi sử dụng trình nối từ, hầu hết các trình kết xuất sẽ rasterize văn bản giống hệt nhau . Trên Chrome, FireFox, IE và Opera, kết xuất các dấu gạch nối thông thường, ví dụ:

abcdefghijklmnopqrstu-vwxyz

giống hệt với kết xuất của các dấu gạch nối thông thường (với Trình kết nối từ U + 2060), ví dụ:

a-⁠b-⁠c-⁠d-⁠e-⁠f-⁠g-⁠h-⁠i-⁠j-⁠k-⁠l-⁠m-n-⁠o-⁠p-⁠q- ⁠R-⁠s-⁠t-⁠u-⁠v-⁠w-⁠x-⁠y-z

trong khi hai kết xuất ở trên khác với kết xuất của " Dấu gạch nối không phá vỡ ", ví dụ:

a ‑ b ‑ c ‑ d ‑ e ‑ f ‑ g ‑ h ‑ i ‑ j ‑ k ‑ l ‑ m ‑ n o ‑ p ‑ q ‑ r ‑ s ‑ t ‑ u ‑ v ‑ w x ‑ y z

. (Phạm vi của sự khác biệt phụ thuộc vào trình duyệt và phụ thuộc vào phông chữ. Ví dụ: khi sử dụng khai báo phông chữ " arial", Firefox và IE11 hiển thị các biến thể tương đối lớn, trong khi Chrome và Opera hiển thị các biến thể nhỏ hơn.)

So sánh "cách kết nối" với (CSS .c1 {white-space:nowrap;}) và :

Trình nối từ có thể được sử dụng cho các tình huống hạn chế sử dụng thẻ HTML, ví dụ: các dạng trang web và diễn đàn.
Trên phổ của cách trình bày và nội dung , phần lớn sẽ coi trình nối từ gần với nội dung hơn, khi so sánh với các thẻ.

^{• Như đã thử nghiệm trên Windows 8.1 Core 64-bit bằng cách sử dụng:

    • IE 11.0.9600.18205

    • Firefox 43.0.4

    • Chrome 48.0.2564.109 (Bản dựng chính thức) m (32-bit)

    • Opera 35.0.2066.92}

— Pacerier
nguồn

Có vẻ như "U + FEFF Zero Width No-break Space" không hoạt động chính xác trong IE11.

— Ivan Gusev

Có vẻ như "U + 2060" không hoạt động nếu "-" được theo sau bởi một số char unicode: như thế nàybingo-⁠bongo

— Ivan Gusev

Mặc dù báo chí tiêu cực liên tục

— JamesWilson

6

Đi dự tiệc muộn, nhưng tôi nghĩ đây thực sự là món đồ thanh lịch nhất. Sử dụng ký tự Unicode WORD THAM GIA & # 8288 ; ở hai bên dấu gạch nối của bạn, hoặc dấu gạch ngang hoặc bất kỳ ký tự nào.

Vì vậy, như vậy:

&#8288;—&#8288;

Điều này sẽ nối biểu tượng ở cả hai đầu với hàng xóm của nó (không thêm dấu cách) và ngăn chặn ngắt dòng.

— Eckstein
nguồn

Tôi đã có thể làm cho điều này hoạt động bằng ALT + 0173 (dấu gạch nối mềm) vì một số lý do trên Windows 10.

— pspahn