在CSS中，寬度的設置通常通過width屬性來進行，我們可以把一個元素的寬度設置為一定的像素值或百分比。但是，有時候我們需要根據元素中的文本內容來自動調整它的寬度，這時候就可以使用“寬度由文字決定”的css。

.auto-width {
display: inline-block;
word-wrap: break-word;
max-width: 100%;
}

以上是設置元素寬度由文字決定的一個基本樣式，它的實現原理是讓元素以inline-block方式顯示，然后設置了一個max-width屬性來限制元素最大的寬度，在文字長度超出時，會自動換行顯示，避免了文字溢出的情況。

除了max-width之外，樣式中還添加了word-wrap屬性來控制文字的換行方式，它的值為break-word表示可以在單詞內進行拆分換行，這樣更符合用戶閱讀的習慣；而如果將word-wrap的值設置為normal，則可能會出現單詞被截斷而無法理解的情況。

需要注意的是，設置寬度由文字決定的樣式，并不適用于所有情況，對于一些特殊的布局或需求，可能需要使用其他的樣式或技巧來解決問題。但是，在合適的場景下，使用寬度由文字決定的css能夠為我們帶來更好的用戶體驗。