ows.nightwolf

Спасибо всем за помощь, что в итоге:
Исходя из спеки: если у элемента одно из свойств overflow-x или overflow-y установлено в visible, а второе из этих свойств в любое значение отличное от visible, то для второго значение автоматически считается установленным в "auto". Т.е. как ни пытайся, а заставить выходящих за пределы родителя по одной оси детей обрезаться, а по другой оси показываться - ничего не получится, будет либо автоматически скролл у родителя добавляться, либо нужно создавать создавать два вложенных враппера, у одного из которых будет overflow-x: hidden, например, а второму выставлять фиксированную высоту.
Т.к. ни один из этих вариантов мне не подходит, пришлось идти другим путем и менять принцип действия моего компонента, чтобы избавится от надобности применять к нему overflow: hidden.

word-wrap: break-word;

Вариант решения номер два: http://jsbin.com/fiyapidixe/edit?html,css,output
Недостатки - в HTML разметке цена и товар поменялись местами

/* Если ширина блока неизвестна: */
left: 50%;
transform: translate(-50%);
/* Если ширина блока известна, можно сделать кроссбраузернее: */
left: 50%;
margin-left: [минус][половина ширины блока]px;

Если вы откроете пример, то там внизу слева будет ссылка "Edit this pen" - нажмете и у вас в 3 блоках будет виден HTML, CSS и JS код. JavaScript код я закомментировал, так что думаю не сложно будет разобраться.

У вас сама библиотека jQuery не подключена. Перед тегами <script> подключащими ваши скрипты вставьте код:
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>Или если нужна поддержка IE8 и ниже:
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

Атрибута нету, но можно очень примитивно имитировать этот функционал через JS. Изображение можно выгрузить в отдельный скрытый iFrame и распечатывать содержимое этого айфрейма. Конечно, это не так эффективно как выгрузка его на компьютер и использование обычного ПО для распечатки, но ради спортивного интереса скрипт я вроде сделал: http://jsbin.com/yaweqa/1/.