2009-04-10 74 views
5

Khi bạn tăng chiều cao dòng của một phần tử, bạn bắt đầu có khoảng trống giữa mỗi dòng văn bản. Hầu hết thời gian này là tốt, vì bạn không thấy khoảng cách cụ thể.Loại bỏ khoảng cách giữa các dòng văn bản

Nhưng nó có vấn đề khi bạn có một cột hẹp, với một liên kết chạy trên nhiều dòng. Nếu bạn di chuyển chuột qua liên kết, có một khoảng cách nhỏ giữa các dòng, làm cho hiệu ứng di chuột liên kết bật và tắt.

Từ góc độ thiết kế/khả năng sử dụng, tôi cảm thấy điều này làm cho trải nghiệm người dùng kém (không ai thích nhấp nháy ngẫu nhiên). Hãy thử nó với điều này:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est. Nunc aliquam, eros a aliquam consequat, ante diam rutrum risus, et dignissim ligula turpis et ante. Maecenas leo neque, euismod in, aliquam et, molestie ac, ligula. Integer venenatis. Pellentesque enim. Maecenas aliquet, tortor at molestie sodales, urna velit pulvinar lorem, ac malesuada nibh turpis eu tortor.

tôi có thể thêm một số padding để liên kết để ngăn chặn điều này xảy ra trong một số trường hợp, nhưng nó không hoạt động khi văn bản lớn; Tôi cần nhiều đệm hơn. Bất cứ ai có ý tưởng cho các giải pháp?

+0

Chính xác bạn có ý gì với "nhưng nó không hoạt động khi văn bản lớn hơn; tôi cần thêm đệm"? bạn có thể cung cấp một ví dụ? Không sử dụng các đơn vị tương đối cho padding sửa lỗi đó? – mercator

+0

Bạn có thể thử sử dụng Firebug bằng liên kết ở trên (hiện đã được sửa). Nếu bạn thêm một nền vào liên kết, bạn sẽ thấy khoảng cách. Bây giờ tăng đệm, khoảng cách biến mất. Bây giờ tăng kích thước phông chữ, khoảng cách xuất hiện trở lại. Vì vậy, padding hoạt động đôi khi nhưng không đáng tin cậy. – DisgruntledGoat

Trả lời

6

Thử khắc phục sự cố nhấp nháy của bạn bằng cách đặt hiển thị: chặn cho phần tử <a> trong cột hẹp đó.

+0

Không phải là một giải pháp khủng khiếp. Vấn đề trong trường hợp này là hiệu ứng di chuột xuất hiện khi chuột nằm trong "hộp được tạo" nhưng không thực sự trên liên kết (nghĩa là ở bên phải của dòng). – DisgruntledGoat

1

Nếu bạn biết điểm bắt đầu và điểm cuối của mỗi dòng bạn có thể đặt một khoảng tròn mỗi dòng, và biến nó thành một khối inline

#wrap {font-size:14px; line-height:16px;} 
a span{display:-moz-inline-block; display:inline-block;line-height:14px;padding:1px 0;} 
a:hover {background:red;} 

<div id="wrap"> 
dsvlaksvh; asvj asdfh;dhldv hd d dl h dfhd d dfh; daljfda k;d <a href="#" > 
<span>hdv </span><span>dvh ldvhldf dhk </span><span>;dhkdf hdl hdfk 
</span><span>dfhkldf h vkhg j</span></a> glj gj f gjl fjl fj f 
    </div> 
+0

Tôi không chắc chắn nếu điều này là có chủ ý, nhưng trong một khoảng của bạn {} sẽ không hiển thị thứ hai: inline-block overrule -moz-inline-block? –

+0

có thể. theo thứ tự đó vì ffx 2 không hỗ trợ inline-block, vì vậy bạn cần hack, nhưng ffx 3 không hỗ trợ nó, vì vậy việc đặt inline-block cuối cùng đảm bảo nó được áp dụng – wheresrhys

0

Sử dụng các đơn vị liên quan để thiết lập padding.

Thêm padding: 0.2ex 0; background: red; sử dụng Firebug/Dragonfly vào liên kết mẫu trong câu hỏi hoạt động tốt cho tôi, bất kể kích thước phông chữ (được đặt qua CSS hoặc phóng to).

Vấn đề duy nhất với việc thay đổi kích thước phông chữ trong Firefox là nền bắt đầu chồng lên dòng trước đó; nhưng đó là sự cố line-height.

Các vấn đề liên quan