Đóng gói địa chỉ email dài trong các hộp nhỏ

Question

Tôi có một hộp có chiều rộng 118px chứa địa chỉ email. Tôi sử dụng word-wrap: break-word; để bọc các địa chỉ tốt hơn. Nhưng trên một loại địa chỉ đặc biệt, điều này làm cho nó tồi tệ hơn.

big.ass.email@addre 
ss- 
is.extremely.lame.de 

Do word-wrap: break-word; nó phá vỡ sau khi "địa chỉ làm" nhưng ceause phần còn lại của địa chỉ không phù hợp trong một dòng nó phá vỡ một lần nữa tại một "breakpoint ưa thích", mà sẽ xảy ra là "-". Trong hành vi mong muốn, lần ngắt thứ hai trong địa chỉ email sẽ không sau "-" nhưng sau "cực kỳ". Tôi lo sợ điều đó là không thể với CSS. Phải không?

Ở đây bạn có thể thấy một ví dụ nhỏ: http://jsfiddle.net/sbg8G/2/

Answer 1

Bạn có thể thử sử dụng text-overflow: ellipsis;

overflow:hidden; 
text-overflow:ellipsis; 

http://jsfiddle.net/sbg8G/8/

Answer 2

Tốt nhất ở đây sẽ được sử dụng <WBR> thẻ hoặc ​ nhân vật để giới thiệu một soft-break bất cứ nơi nào bạn muốn. ví dụ .:

Demo: http://jsfiddle.net/abhitalks/sbg8G/15/

HTML:

... 
<a href="big.ass.email@address-is.extremely.lame.de"> 
    big.ass.email@&#8203;address-is&#8203;.extremely.lame.de 
</a> 
... 

Ở đây, ​ được chèn sau "@" và sau "-is" gây ra một ngắt tại các điểm.

Quan trọng: word-wrap và word-break sẽ không giúp bạn ở đây.

Lý do:

1. word-break có nghĩa là cho CJK (Trung Quốc, Japanse, Hàn Quốc) văn bản. (Reference). Mục đích chính của nó là để ngăn chặn từ vỡ cho văn bản CJK. Nghỉ ngơi là bình thường.
2. word-wrap được sử dụng để xác định xem trình duyệt có thể ngắt dòng trong các từ để ngăn chặn tràn hay không. Đó là nó. (Reference) Điều chính cần lưu ý là "..các từ không thể phá vỡ bất thường có thể bị hỏng tại các điểm tùy ý ..". Các điểm tùy ý không cho bạn nhiều quyền kiểm soát, đúng không?

Dấu gạch nối cứng giúp chỉ ra các điểm ngắt. Bạn có dấu gạch ngang trong địa chỉ email của mình và gợi ý ngắt từ đó.

---

Note:

Một lựa chọn tốt hơn sẽ được có CSS3 làm điều đó cho chúng ta. word-wrap và word-break không cho phép kiểm soát điểm ngắt. hyphens, nhưng, thật không may hyphens vẫn còn "là công nghệ thử nghiệm".

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

hyphens sẽ có thể làm các trick cùng với:

hyphenate-limit-lines 
hyphenate-limit-zone 
hyphenate-character 
hyphenate-limit-before 

Nhưng, điều này không hiện đang làm việc như mong muốn. Nếu không, ­ sẽ giúp bạn.

Note 2:

hyphens, sẽ thêm một "dấu nối cứng" (-) trong đó sẽ dẫn đến kết quả ngoài ý muốn trong trường hợp của bạn (địa chỉ email sẽ thay đổi).

Tín: here, here, và here